CSS Rearranging Specific elements to be side by side, but stacked when using mobile device/width too small?

Question

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, bu

Answer 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

  
    
    
  

  
    
 Navbar 
    

      
 Box 1 
      
Box 2 
      
 Box 3
      
 Box 4 
    
    
 
      
 Box 5 
      
 Box 6
    
  

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%;

  }
}