How do you resize the Divs on your page based on screen size?

Question

I am in the middle of completing a coding test. I want to change all my div sizes according to screen size. This is because my test does not look the same on my laptop than it looks on a mac computer monitor. On my small laptop all the divs look big, however on a mac computer monitor it appears to look decent.

Answer 1

Use vh.

Refer Viewport sized typography

Use 100vh and 100vw if you want full width and full height. Else change accordingly.

div {
  height: 100vh;
  width:100vh
}

Answer 2

Use media queries or set width/height in % or vw/vh instead of px
I hope that is the thing you are looking for... Or maybe use framework like bootstrap or foundation

Answer 3

You should use Chrome Developer Tools to check at what resolution you want to change the size of your div!

If you have a div:

 #bluebox { width: 50px; height: 50px; background-color: blue; } 

 <div id="bluebox"> </div> 

But, when the screen size is 480px wide you only want the div to be 25px X 25px you would do like this:

 #bluebox { width: 50px; height: 50px; background-color: blue; } @media (max-width: 480px) { #bluebox { width: 25px; height: 25px; } } 

 <div id="bluebox"> </div> 

This is done with media queries - which is very simple and standard. I hope it helped!