Css Rearranging Specific Elements To Be Side By Side, But Stacked When Using Mobile Device/width Too Small?
I've been working on this nutrition calculator and am having trouble formatting the CSS to optimize data visualization. I've tried adjusting the divs and adding containers, but for
Solution 1:
First : Try to write the CSS in a separate CSS file. Makes maintenance easy and styles wont override.
use media query to set to 100% and clear the float
Have created a example to help . Please take a look at plunkr link :
https://plnkr.co/edit/DyTvCh3XzWoYx8MfXnIg?p=preview
<!DOCTYPE html><html><head><linkhref="style.css"><scriptsrc="script.js"></script></head><body><divclass="navbar"> Navbar </div><divclass="main-container"><divclass="box"> Box 1 </div><divclass="box">Box 2 </div><divclass="box"> Box 3</div><divclass="box"> Box 4 </div></div><divclass="second-container"><divclass="box-2"> Box 5 </div><divclass="box-2"> Box 6</div></div></body></html>CSS :
*{
padding : 0;
margin : 0;
}
body{
height : 100vh;
}
.navbar{
height : 50px;
width : 100%;
background : green;
text-align : center;
color : white;
}
.box{
height : 250px;
width : 20%;
background : blue;
display : inline-block;
text-align : center;
font-size : 1.5em;
color : white;
}
.box-2{
height : 250px;
width : 48%;
background : orange;
display : inline-block;
text-align : center;
font-size : 1.5em;
color : white;
}
@media screen and (max-width: 480px) {
.box{
display : block;
width : 100%;
}
.box-2{
display : block;
width : 100%;
}
}
Post a Comment for "Css Rearranging Specific Elements To Be Side By Side, But Stacked When Using Mobile Device/width Too Small?"