Issue with Sliding Menu Size

Design help General
1

Hello!

I am finishing up my first ever site, and am running into an issue where when my menu slides out on a more narrow display, the background of the menu will resize properly but the text will stay static and start to go off the screen.

This is a bit of an extreme example but hopefully you understand what I’m trying to say.

Screen Shot 2020-04-26 at 4.03.56 PM
Screen Shot 2020-04-26 at 4.03.56 PM1913×653 54.6 KB

I feel like this shouldn’t be that hard of a fix, but since I’m new I don’t know what that fix is.

Thank you in advance!

Here is my site Read-Only: https://preview.webflow.com/preview/mattahrens?utm_medium=preview_link&utm_source=designer&utm_content=mattahrens&preview=38a5df7de3cfc55b4160a7f3409a1e0c&mode=preview

Live link: https://www.mattahrens.design

2

Hi @Matt_Ahrens!

I go through that problem at the start too.
The issue here is that you set background menu height and width with vh and vw, respectively.
That makes the background responsive, but you left the size of the font in px.
So when the page is resized, the background automatically adjust itself, but the text keep the same px (with a larger or smaller page).

To solve this, you can set the size of the font, lets say, to 10 vw.

image
image1833×819 145 KB

image
image1850×799 145 KB

That way, the text will always adjust too! :wink:

Tip: If you use VW or VH, change all the elements inside it (included the margin and padding), to make it responsive.