CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
SaidbakR
SaidbakR

Reputation: 13544

Foundation 5 how to make one column for small screen

I have the following grid using :

<div class="row">
 <div class="small-6 large-3 columns">&nbsp;</div>
 <div class="small-6 large-9 columns">&nbsp;</div>
</div>

The above grid makes the layout of two columns. However, I want to know in small screens to make the above layout to be one column layout instead of two columns with 6. In other words, I want the second div of that row to act as a new row for small screens.

Upvotes: 2

Views: 1365

Answers (4)

Daniel C
Daniel C

Reputation: 2155

Assuming you are using the standard 12 column grid and haven't modified that, just make the small ones 12:

<div class="row">
 <div class="small-12 large-3 columns">&nbsp;</div>
 <div class="small-12 large-9 columns">&nbsp;</div>
</div>

Just know that small filters it's way up... so in this example "medium" will also be 12. If you want medium to look like large, then do this:

<div class="row">
 <div class="small-12 medium-3 columns">&nbsp;</div>
 <div class="small-12 medium-9 columns">&nbsp;</div>
</div>

Notice how you don't need the large in the above example as medium filters up to everything above it.

Upvotes: 2

JAre
JAre

Reputation: 4756

Something like this should work:

<div class="row">
    <div class="medium-6 large-3 columns">
        <div class="small-6 medium-12 large-12 columns">column 1</div>
    </div>
    <div class="medium-6 large-9 columns">
        <div class="small-6 medium-12 large-12  columns">column 2</div>
    </div>
</div>

http://jsfiddle.net/6tMZH/

Upvotes: 0

Sudheer
Sudheer

Reputation: 2985

using the below Html you can have offset and have centered div on mobile screen.and have large-3 and large-9 div respectively on larger screens.

<div class="row">
  <div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div>
  <div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div>
</div>

In foundation css column last child is floated right.so we change it to float left to have both the div stacked up on after the other

.new{
float:left;
}

Upvotes: 1

Michael Meehan
Michael Meehan

Reputation: 11

should be a simple fix:

.columns {
    width:100%;
}

You can see it here

Upvotes: -1

Related Questions