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

后端未结

关注

 1  1981

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

相关标签:

1条回答

半阙折子戏

2021-01-28 16:27

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 rel="stylesheet" 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%;

  }
}

0 讨论(0)