[Resolved] Top Bar formatting for iPhones

[Keith]

Hi GP Team!
I have been struggling to get the icon/text formatting to be consistent specifically when it comes to older iPhones. Strangely enough, it looks right on android and iPhone 11, but on iPhone 8 and older the text and icons in the top bar no longer align as intended. I have tried several variations with the CSS, and the only using 1 specific font size/icon size displays nicely across all phones (the problem with that is the fonts and icons are too big – 30px x 30px image, 20 px font ).

[Leo]

Hi Keith,

Have you fixed this? I used the browser simulator and didn’t notice any issues:
https://www.screencast.com/t/fxr13de1

I would also say that using a block element with SVG icon would be the better solution:

[Keith]

thanks for the info Leo. tried it with the block elements and that wasn’t working either
the emulators don’t show this issue because it is not by screen size as much as it is device-specific to Iphones of a certain age
we ended up solving it for now with very specific media queries

[Leo]

Sounds good 🙂

[Author]

Posts