996-Grid icon indicating copy to clipboard operation
996-Grid copied to clipboard

How to Align Content center? without class Container

Open DjSunrise opened this issue 9 years ago • 1 comments

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

DjSunrise avatar Jun 04 '15 10:06 DjSunrise

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;
    }
}

emilorol avatar Jun 04 '15 15:06 emilorol