Relume

Log inLog into community

Community forum for knowledge and support

Updated 8 months ago

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

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

At a glance

The community member has a responsive issue on their website where the text in the navigation bar overlaps when zooming in to 250%. They tried using REM values and VW fonts, but that did not fix the issue. Another community member suggested looking at videos by Timothy Ricks on responsive typography, but the community member found them too advanced. After sharing a preview link, the community members discussed potential solutions, such as adding a top margin to the content div or setting a max height. Eventually, the community member found a solution by setting the content div's max height to 75%, which resolved the overlapping issue.

Useful resources

·

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?

E

C

25 comments

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

Attachment

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.

Add a reply

Sign up and join the conversation on Slack