Responsive issues with text overlapping in the nav bar when zooming in

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

I am using VW fonts, i will test the rems to see if this changes it. Thank you.

No that did not fix it 😞

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!

https://www.youtube.com/results?search_query=timothy+ricks+responsive+typography

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.

That could definitely be causing it! If you share a read-only link I could take a look

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

https://preview.webflow.com/preview/relume-style-guide-templa-661c547195714?utm_medium[…]4&preview=ca46ff27a2f3b7c39abde8b0033eb891&workflow=preview

I'm getting a 404 on that page

Hi Emily, for some reason the share toggle was off, sorry

Can you try when your ready thank you.

Could you just add a top margin onto the div contain the text content for this section?

I think you just need to make sure it won't overlap the nav so that should work.

I have wrapped it in a top margin and made it custom with 25% but this brings the content down also

Not sure why it is only on a specific zoom size and then the content zooms in ok after that

For me, the heading is overlapped by the nav bar at all zoom sizes. Even 110%

But that may be because I'm viewing in Webflow preview, rather than the live site

Maybe, i only get it at 250% on a studio display but no it will be different on alternative screen sizes

I might of fixed this my giving the content div a max height of 75%

https://relume-style-guide-templa-661c547195714.webflow.io/

could you check please

Looks good to me!

Well done 😊

Thank you Emily, now to implement on clients site.