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:
Use JavaScript to add class .full when the viewport width reaches a certain values.
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;
}
}