Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Responsive Design

CSS Rearranging Specific Elements To Be Side By Side, But Stacked When Using Mobile Device/width Too Small?

Post a Comment
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>
    <link  href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="navbar"> Navbar </div>
    <div class="main-container">
      <div class="box"> Box 1 </div>
      <div class="box">Box 2 </div>
      <div class="box"> Box 3</div>
      <div class="box"> Box 4 </div>
    </div>
    <div class="second-container"> 
      <div class="box-2"> Box 5 </div>
      <div class="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?"