Is there any class in Zurb Foundation 6 to make grid container fullwidth for a certain breakpoint only

22 Views Asked by At

Recently I've finished the site based on Zurb Foundation 6 XY Grid. According to the documentation there are two classes for fullwidth .grid-container: .fluid (makes fullwidth container with gutters) and .full (makes fullwidth container without gutters).

But what, if I need to have a fullwidth container only, for example, for the tablet layout? Is there any additional classes for that (like .hide-for-medium or so on)?

For now I've found only two ways to deal with it:

  1. Use JavaScript to add class .full when the viewport width reaches a certain values.

  2. Use CSS to reset margins and paddings for a certain grid and it's content:

Maybe somebody knows a built-in class or more elegant soluion.

JQuery solution:

if ($('body').width()  <= 624) {
                $('.menu-grid-container').toggleClass('full');
            }

CSS solution:

.menu-grid-container {
            padding-right: 0;
            padding-left: 0;
            max-width: 100%;
            width: 100%;
            margin-left: 0;
            margin-right: 0;

            .grid-x, .cell {
                padding-right: 0;
                padding-left: 0;
                max-width: 100%;
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }
        }
0

There are 0 best solutions below