996-Grid
996-Grid copied to clipboard
How to Align Content center? without class Container
Hello! I have 4 blocks in a row on ne Desktop version. example
LOOKS WELL! BUT When I see it on mobile it shows 1 block in a row. I want to view 2 blocks in a row on mobile. I can fix this by REMOVING class containet. But now, on the desktop version that 4 blocks shows wrong
My advice is to use a media query to re-size the DIV to 50% and to keep the left float.
Some HTML similar to yours:
<div class="container">
<div class="grid_3 xs_grid_2">item 1</div>
<div class="grid_3 xs_grid_2">item 2</div>
<div class="grid_3 xs_grid_2">item 3</div>
<div class="grid_3 xs_grid_2">item 4</div>
</div>
Then the CSS like:
/* =============================================================================
Less than 480px
========================================================================== */
@media only screen and (max-width: 479px) {
/* Container */
.container { width:300px;}
/* Global */
.container .xs_grid_2 {
width:140px;
float:left;
}
}