How to align Ivs side by side

Asked

Viewed 471 times

1

I’ve tried everything and way to get these div aligned, on the desktop they are perfect, every line has 4 div computer visualization, now on android was to show 3 div by lines, but it did not work very well, and the code is the same used for desktop, I just changed the display number to 3

inserir a descrição da imagem aqui

<div class="cartaz">
<ul>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
</ul>
</div>

desktop

.cartaz{
   float: left;
   margin: 0% 2% 0% 0%;
   padding: 0% 0% 2% 0%;
   width: 78%;
   border-bottom: 1px solid #ebebeb;
}
li .mini-box{
  float: left;
  margin: 0% 2% 0% 0%;
  width: 23.5%;
  height: 230px;
  background-color: #4DAE52;
  border-radius: 3px;
}
li:nth-child(-n+4) .mini-box{
  margin: 0 2% 0 0;
}
li:nth-child(4n) .mini-box{
  margin: 0 0 2% 0;
}
li:last-child .mini-box{margin: 0%;}

android

@media only screen and (max-width: 360px){
  li .mini-box{
    margin: 0 2% 0 0;
    width: 31.9%;
    background-color: purple
  }
  li:nth-child(-n+3) .mini-box{
    margin: 0 2% 0 0;
    background-color: orange
  }
  li:nth-child(3n) .mini-box{
    margin: 0 0 2% 0;
    background-color: gray
  }
  li:last-child .mini-box{margin: 0%;background-color: red}
}
css

  • Put the full CSS so you can reproduce the problem.

  • @Sam I know it seems to be incomplete, more and that

1 answer

2


Change the rule li .mini-box for li:nth-child(n) .mini-box in the @media because he has more strength than the rule li:nth-child(4n) .mini-box that is defining the right margin of some elements outside the @media. The (n) will apply properties to all selector elements.

I increased the breakpoint from 360px to 660px for example and power visualize here.

ul, li{
   padding: 0;
   margin: 0;
   list-style: none
}

li .mini-box{
  float: left;
  margin: 0% 2% 0% 0%;
  width: 23.5%;
  height: 230px;
  background-color: #4DAE52;
  border-radius: 3px;
}
li:nth-child(-n+4) .mini-box{
  margin: 0 2% 0 0;
}
li:nth-child(4n) .mini-box{
  margin: 0 0 2% 0;
}
li:last-child .mini-box{margin: 0%;}


@media only screen and (max-width: 660px){
  li:nth-child(n) .mini-box{
    margin: 0 2% 0 0;
    width: 31.9%;
    background-color: purple
  }
  li:nth-child(-n+3) .mini-box{
    /* margin: 0 2% 0 0; removido */
    background-color: orange
  }

  li:nth-child(3n) .mini-box{
    margin: 0 0 2% 0;
    background-color: gray
  }
  li:last-child .mini-box{margin: 0;background-color: red}

}
<ul>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>

    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
</ul>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.