Fixing Text Overlap in Nav Bar at 250% Zoom on New Site

Hey guys, I have some responsive issues on a site we have just built. When zooming in to 250% on the browser page the text (heading) overlaps in the Nav bar, could anyone point me in the right direction to fix this?

25 comments

Emily M.
·
Hey Chris, are you using REM values for the font size? I think that helps to adjust text sizes on zoom, but I could be wrong
Chris A.
·
I am using VW fonts, i will test the rems to see if this changes it. Thank you.
Chris A.
·
No that did not fix it 😞
Emily M.
·
Ah sorry. You might find an answer on Timothy Ricks' YT channel, but if I'm honest I find his videos hard to follow. He's great, it's just a bit advanced for me!
Emily M.
·
https://www.youtube.com/results?search_query=timothy+ricks+responsive+typography
Chris A.
·
Thank you, looking over some of my other pages, the only difference I can see is on one page it is static and then the affected page is absolute.
Emily M.
·
That could definitely be causing it! If you share a read-only link I could take a look
Chris A.
·
Hi Emily, that would be great, i have just taken the hero and nav bar as actually the navbar on th eother pages are also absolute
Chris A.
·
https://preview.webflow.com/preview/relume-style-guide-templa-661c547195714?utm_medium[…]4&preview=ca46ff27a2f3b7c39abde8b0033eb891&workflow=preview
Emily M.
·
I'm getting a 404 on that page
Chris A.
·
Hi Emily, for some reason the share toggle was off, sorry
Chris A.
·
Can you try when your ready thank you.
Emily M.
·
Could you just add a top margin onto the div contain the text content for this section?
Emily M.
·
I think you just need to make sure it won't overlap the nav so that should work.
Chris A.
·
I have wrapped it in a top margin and made it custom with 25% but this brings the content down also
Chris A.
·
Not sure why it is only on a specific zoom size and then the content zooms in ok after that
Emily M.
·
For me, the heading is overlapped by the nav bar at all zoom sizes. Even 110%
Emily M.
·
But that may be because I'm viewing in Webflow preview, rather than the live site
Chris A.
·
Maybe, i only get it at 250% on a studio display but no it will be different on alternative screen sizes
Chris A.
·
I might of fixed this my giving the content div a max height of 75%
Chris A.
·
https://relume-style-guide-templa-661c547195714.webflow.io/
Chris A.
·
could you check please
Emily M.
·
Looks good to me!
Emily M.
·
Well done 😊
Chris A.
·
Thank you Emily, now to implement on clients site.