Menu icon Foundation

My Posts



  • 1
    Reply
  • By Craig Myles

    Hi, If I use the SASS version of the grid (see Customize with Sass of http://foundation.zurb.com/docs/components/grid.html) is it possible to specify the number of columns to use depending on the screen size? So basically mimicking the "small-2 large-4... (continued)

    Last Reply by Craig Myles over 5 years ago


My Comments

Craig Myles commented on Craig Myles's post over 5 years

I've actually decided to place a div on the screen and hide it. I then set the "font-family" depending on the media query in place, setting the font-family to "small", "medium", "large" etc. I then check to see what the font-family is set as to determine the screen size. It's not perfect but it uses the same logic as https://github.com/JoshBarr/on-media-query/ and saves me having to store two sets of breakpoint variables.

Craig Myles commented on Craig Myles's post over 5 years

This seems to work.

.m-player__globalHeader {
  @include grid-row();
}

.m-player__globalHeader__col1 {
    @include grid-column(8);

    @media #{$medium-up} {
      @include grid-column($offset:2,$columns:3);
    }
  }

Posts Followed


Following

    No Content

Followers

My Posts



My Comments

You commented on Craig Myles's post over 5 years

I've actually decided to place a div on the screen and hide it. I then set the "font-family" depending on the media query in place, setting the font-family to "small", "medium", "large" etc. I then check to see what the font-family is set as to determine the screen size. It's not perfect but it uses the same logic as https://github.com/JoshBarr/on-media-query/ and saves me having to store two sets of breakpoint variables.

You commented on Craig Myles's post over 5 years

This seems to work.

.m-player__globalHeader {
  @include grid-row();
}

.m-player__globalHeader__col1 {
    @include grid-column(8);

    @media #{$medium-up} {
      @include grid-column($offset:2,$columns:3);
    }
  }

Posts Followed


Following

  • No Content

Followers

  • No Content