Menu icon Foundation
Add custom media query to be used as class?

Is there a way to add another media query range in _settings.css that I can use as a class in html like xsmall-12 small-12 medium-6 large-6 etc??

My site works ok in small and large sizes, but I need another medium setting because halfway through the medium size (closer to the small range) I want to stack things differently and some things get a little messed up.

I tried things like adjusting the ranges and doing stuff like this -

div#form2{
label{
@include grid-column(12);
}

to certain divs, but something else always ends up messed up. Or I will add "@include grid-column(12);" on something in medium taking up six columns that I would like to bump to the next row, but it won't go. It's like I want half the medium size to be 12 columns and the other half to be 6. argh.

I made custom ranges in my CSS too but then I cant figure out how to change how many columns a div takes up. They have xlarge and xxlarge but nothing inbetween small and medium and medium and large. This is what I would need.

I hope someone understands! Thanks!

media queryqueriescolumnsrangesclasseshtmlmediumsmall

Is there a way to add another media query range in _settings.css that I can use as a class in html like xsmall-12 small-12 medium-6 large-6 etc??

My site works ok in small and large sizes, but I need another medium setting because halfway through the medium size (closer to the small range) I want to stack things differently and some things get a little messed up.

I tried things like adjusting the ranges and doing stuff like this -

div#form2{
label{
@include grid-column(12);
}

to certain divs, but something else always ends up messed up. Or I will add "@include grid-column(12);" on something in medium taking up six columns that I would like to bump to the next row, but it won't go. It's like I want half the medium size to be 12 columns and the other half to be 6. argh.

I made custom ranges in my CSS too but then I cant figure out how to change how many columns a div takes up. They have xlarge and xxlarge but nothing inbetween small and medium and medium and large. This is what I would need.

I hope someone understands! Thanks!

Karl Ward about 5 years ago

What you are referring to small-12 medium-6 etc are not media queries, but column classes for the Foundation grid component. You can easily add your own custom media queries, but unfortunately it would not be easy to extend the Foundation grid with additional sizes.

I would argue that you are not planning properly if you need 4 breakpoints in your design for ranges within 640 to 1024 px.