How do I resize navbar to match window size

Hello ,

Thanks in advance for any help you can give me.

I have been trying to make a website with CSS , HTML and some JavaScript.

Things are starting to look cool but I still have some issues , like I can’t make the top navbar resize when I change the size of the window or the painting items in the middle stop being centered.

Is there any way you can take a look at this code and give me some tips ?

Thanks

Hi @izzypt!

This is a great start to a website! Responsiveness can be a little tricky when getting started but we are here to help you get started.

I see a couple issues with your current code:

  1. this one is possibly just the way you copied everything into codepen but it looks like you are missing the opening html and body tags at the top of your code
  2. as for the responsiveness, you have used pixels (px) as your units of measure. These are static and will not change when the window is resized. I recommend you look into using percentages or view height/width (vh/vw) as they will adjust with the window sizing for your divs etc. For the fonts, I recommend looking into EM and REM for the font sizing too to make that a little more flexible as well.
    This link will get you started into the basics: https://www.w3schools.com/cssref/css_units.asp

If these don’t work for you, I will be happy to take a look for you again :slight_smile:

Hello @chelsead23,

Thank you !

I will look into it and try to change the units of measure to see if anything changes. But , does that mean I should also set the width and height of a box with % ??

You are correct! If you want the box to move when you are changing screen sizes, they have to be set to a relative unit like a percent or the vh/vw (which is similar to a percentage). This way it will stay in a size relative to the window, whereas pixels will stay the same amount of pixels. For example, if you set the width to 1000px, but you view it on a mobile screen that is 450px, it will overflow out of that window by 550px – not responsive to shrinking.

Have you learned about the @media query yet? If not, that will help you with screen size breaks and understanding how percentages and responsive design works.
Here is a link to get you started: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

2 Likes

Thanks @chelsead23 :wink:

1 Like