Menu icon Foundation
Collapse row if mobile?

    <div class="row collapse">
      <div class="small-9 medium-10 columns">
        <input type="email" placeholder="E-Mail">
      </div>
      <div class="small-3 medium-2 columns">
        <input type="submit" placeholder="Sign-Up" class="button postfix">
      </div>
    </div>
            

         

Is it possible to collapse the row only when small screen size (mobile)?

I guess I am a little confused how to attempt media queries using Foundation and sass. I am also wondering how to update the position of an h1 element in a div when viewed on a small screen.

columnsSasscssrowcollapse

    <div class="row collapse">
      <div class="small-9 medium-10 columns">
        <input type="email" placeholder="E-Mail">
      </div>
      <div class="small-3 medium-2 columns">
        <input type="submit" placeholder="Sign-Up" class="button postfix">
      </div>
    </div>
            

         

Is it possible to collapse the row only when small screen size (mobile)?

I guess I am a little confused how to attempt media queries using Foundation and sass. I am also wondering how to update the position of an h1 element in a div when viewed on a small screen.

Brandon Arnold over 5 years ago

This would do it for you

http://cdpn.io/bAfeJ

You can replace the media-query in the example with @media #{$small-only} { } if you'd like. I couldn't use it in codepen as we import the flat css.

Shakogun about 3 years ago

The Codepen seems to be dead?

Shakogun about 3 years ago

I put a mobile--collapse class on my rows and in the style tag under </head>

@media only screen and (max-width: 600px) {
      table.row.mobile--collapse td.large-10.first, table.row.mobile--collapse th.large-
10.first {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.row.mobile--collapse td.large-10.last, table.row.mobile--collapse th.large-10.last {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }