I've tried everything I've done and left these div aligned, on the desktop they are perfect, every line has 4 div visualizing the computer, now in the android was to show 3 div by lines, but it did not work very well, and the code and the same one used for desktop, I just changed the display number to 3
<divclass="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}
}