Mobile flexbox is being wonky and text moves

The issue doesn’t show up in the previewing mode but when I go to the site on my phone (iPhone 13) that’s when it’s wonky and the text moves to different spots. Any help would help!

Hi Camba!

If you don’t mind, pleas share a screenshot of what exactly is off on your iPhone.

Furthermore, I’d very much advise against using VW as your font value in your case. It makes it very difficult to get it responsive and isn’t very user-friendly. Try using PX instead!

Hi, thanks for responding!

Here are a few screenshots from my iPhone.
I thought PX was the worst because it doesn’t respond well. Or is it that I’d use PX on each breakpoint? Second website so I’m still learning :sweat_smile:

No worries!

Well… It depends on how you look at it. VH and VW are definitely responsive, but on the other hand, it can also cause unwanted overflow behavior as seen on your website.

I noticed you work a lot with VH and VW on other elements as well, which can make it very difficult to prevent layout shifting. Maybe start with using PX for some heights, width and font sizes to see if it improves. :slight_smile:

Ok! I’ll give that a go!


1 Like