Skip to content Skip to sidebar Skip to footer

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?"