htmlcssmedia-queriescss-floatclearfix

Why is my media query putting elements out of their container?

Hello Community: I am learning GridSystems right now. I made 2 media queries depending on the screen size: the first one is for 768px the second one is for 480px. but when i adapt the screen size, the elements are coming out of their container. Why? I already have applied the clearfix hack. I want that the elements dont come out of their container element.(not necessarily .container but every container element.)

html,body{
  box-sizing:border-box;
  margin:0;
}

.container{
  width:95%;
  margin-left:auto;
  margin-right:auto;
  background-color:yellow;
}
.container::after{
  content:"";
  clear:both;
  display:block;
}

.row{
  box-sizing:border-box;
  height:50px;
  border:5px solid orange;
  width:auto;
}

.col{
  float:left;
  box-sizing:border-box;
  height:100%;
  border:5px solid red;
  width:auto;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;}
.col-4{width:100%;}

/*Wichtige Viewports
  >1200+px:Desktop
  768px:Tablet Hochformat;
  480px:Handy Querformat
*/

@media(max-width:768px){
  .col-1{width:50%}
  .col-2{width:50%}
}

@media(max-width:480px){
  .col-1{width:100%}
  .col-2{width:100%}
  .col-3{width:100%}
}
<div class="container">
            <div class="row">
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
            </div>
            <div class="row">
                <div class="col col-2"></div>
                <div class="col col-2"></div>
                <div class="col col-2"></div>
            </div>
            <div class="row">
                <div class="col col-3"></div>
                <div class="col col-3"></div>
            </div>
            <div class="row">
                <div class="col col-4"></div>
            </div>
        </div>

Solution

  • Couple of things:

    I've commented this in css block editor this points so see if this clears your doughts

    There are frameworks like bootstrap and bunch others that do this auto for you, but it's much better to take low path and learn how things work under the hub - cheers

    html,
body {
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
}

.container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
}

.row {
  box-sizing: border-box;
  /* height: 50px; 
    I'd suggest to not have explicit height set on parent
  */
  border: 5px solid orange;
  width: auto;
}
/* set row's after pseudo to clear floats of child elems - short clearfix */
.row:after{
  content: '';
  clear: both;
  display: table;
}

.col {
  float: left;
  box-sizing: border-box;
  height: 2em; /* but would suggest to set height of child elements - .col's */
  border: 5px solid red;
  width: auto;
}

.col-1 {
  width: 16.6666%;
}

.col-2 {
  width: 33.3333%;
}

.col-3 {
  width: 50%;
}

.col-4 {
  width: 100%;
}


/*Wichtige Viewports
  >1200+px:Desktop
  768px:Tablet Hochformat;
  480px:Handy Querformat
*/

@media(max-width:768px) {
  .col-1 {
    width: 50%
  }
  .col-2 {
    width: 50%
  }
}

@media(max-width:480px) {
  .col-1 {
    width: 100%
  }
  .col-2 {
    width: 100%
  }
  .col-3 {
    width: 100%
  }
}
    <div class="container">
  <div class="row">
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
  </div>
  <div class="row">
    <div class="col col-2"></div>
    <div class="col col-2"></div>
    <div class="col col-2"></div>
  </div>
  <div class="row">
    <div class="col col-3"></div>
    <div class="col col-3"></div>
  </div>
  <div class="row">
    <div class="col col-4"></div>
  </div>
</div>