Question
Is it possible to do the inverse of Susy: fluid layout up to the second breakpoint -- or, in other words, have a Susy grid that is static
up until a break and then magic
beyond that point?
I admit, I'm not making a mobile-ready site. Instead, I want to use some of the fluid elements of the grid system for different monitor sizes and then 'turn off' this functionality when the browser window is too small.
By reading the documentation, I would think that I should set my global variable as such
$container-style: static;
And then at my specific @at-breakpoint
do something like this
@at-breakpoint(XX) {
@include set-container-width(yy, magic)
However, this has no (discernible) effect.
Research Thus Far
In the set-container-width, I see that the $container-style argument
<$style>: Optionally return static lengths for grid calculations. Default: $container-style.
Does this mean that you can only got to static (from 'magic' or 'fluid').
Check the container-related css output. The difference between a 'static' container and a 'magic' one is whether we use width
or max-width
. If you have already set the container width to be 30em
(for example), then adding a max-width of 50em
won't change anything. You have to also remove the previous width setting. You can do that either with more specific media-queries, or by simply adding width: auto;
along with your new container-width setting.