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.
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
}
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
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!