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.
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
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
}
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>
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>
This is done using media queries, which is very simple and standard. Hope this helped!