White Colored Font Not Visible For iPad/iPhone

Hello, I have a site in development where I can not see the white font with a red bg on the header of my site. Can you provide some assistance. I’ll send url and login info in pm.

Thanks

Hi @mcjensen,

I can see the issue. The space is not enough to display all those text/modal/buttons on mobile.
To fixed it, we need 2 containers in this bar. The first one that you have we will hide it on mobile device, go to Customize tab > HIDE DURING BREAKPOINTS to do hide it. Then please try to create another container inside the same bar. Add the same content. Flex settings should be like this to make it on top of each other:

This time using HIDE DURING BREAKPOINTS hide it on desktop screen.

Inspect the Bar, set its height to AUTO so it will adjust accordingly on smaller screen.
For more information, please check this:

Hope this helps.

Thank you for your response. I understand the concept and have made the changes you recommend. There is a problem with the text of the phone number and the Certifications modal toggle being visible. I am attaching a screenshot from my iphone.

Hi McJensen,

Regarding the Phone number and its icon. Please replace that with a Button element instead, because its tricky to make that 2 elements align while your container flexbox placement is set to Column.

If you want it to appear like a normal text and not a button, you can set the background-color to transparent, the border to 0, and the border-shadows to 0. And same as the Content Area’s toggle, you can set an icon to the button easily.

Regarding the Certifications Dropdown, it was set to be hidden on the extra small device, please audit your Hide During Breakpoints option on that element.

Another thing, make sure that your Video bar (4th bar) has a lower z-index than the Info Bar (3rd bar) so it does not cover the dropdown.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.