Menu icon Foundation
Offset or Push columns on small screens

Hello,

I have an issue which I could not fix. I have a layout for large-8-columns and large-4-columns on large and medium screens. However, on the small screens I make the 8 columns invisible and turn smaller 4 column into a 8 column. It works perfectly but last thing I want to do is to center the 8 column on small screens (push 2 columns or offset by 2 columns) however, when I use "large-offset-2 columns" or "small-push-2 columns" it also effects the medium and large screens as well.

Does anyone have any suggestions on how to achieve this?

Many thanks...

offsetpushsmall screens

Hello,

I have an issue which I could not fix. I have a layout for large-8-columns and large-4-columns on large and medium screens. However, on the small screens I make the 8 columns invisible and turn smaller 4 column into a 8 column. It works perfectly but last thing I want to do is to center the 8 column on small screens (push 2 columns or offset by 2 columns) however, when I use "large-offset-2 columns" or "small-push-2 columns" it also effects the medium and large screens as well.

Does anyone have any suggestions on how to achieve this?

Many thanks...

This post has been closed. No new replies can be added.

Carol Skelly almost 3 years ago

Have you tried something like this?

http://codeply.com/go/wzsxe3yeD6

<div class="row">
    <div class="large-8 medium-8 hide-for-small-only columns ">

    </div>
     <div class="large-4 medium-4 small-8 small-centered large-uncentered medium-uncentered columns">

    </div>
</div>

Yucel almost 3 years ago

Thank you so much Carol. It worked like a charm. I wasn't aware of the "uncentered" option.