Clever Geek Handbook

How do I resize sections on a page based on the screen size?

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

+3


source to share


3 answers


Use media queries or set width / height in% or vw / vh instead of px
I hope this is what you are looking for ... Or maybe use a framework as bootstrap or foundation



+1


source


Use vh.

Refer to Typography Viewport



Use 100vh

and 100vw

if you want full width and full height. Otherwise, change accordingly.

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


source


You have to use the Chrome developer tools to check what resolution you want to resize your div at!

If you have a div:

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

        
        
        
      

    
<div id="bluebox">
</div>
Run codeHide result


But when the screen size is 480px wide, you 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>
Run codeHide result


This is done using media queries, which is very simple and standard. Hope this helped!

+1


source






More articles:


All Articles