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

· Sorted by Oldest

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