What would be the proper way to add media queries to specific parts of my zen 7.x.6.x subtheme?
Say I have a block that I want to hide completely on small screens.

This works, of course:

@media only screen and (max-width : 330px) {
  //some css
}

but seeing $zen-layouts defines some media query variables (m, xl, xxl etc), I'm guessing I have to reference these in sass/css some way?

I have been reading the documentation on both zen theme and zen-grids, but I have not been able to figure this out.

Comments

robotjox created an issue.

Noemi’s picture

Noemi CreditAttribution: Noemi commented

Searching for same kind of documentation. I found this comment in subtheme _variables.scss file:

// Breakpoints
//
// Use the `respond-to()` mixin to use named breakpoints. Documentation is
// available in the [Breakpoint wiki
// pages](https://github.com/at-import/breakpoint/wiki/Respond-To).
//
// Style guide: sass.variables.breakpoints

Hope it helps. :)