Styles: what do I need to know about our breakpoint system?

[ninetydegrees]

Hi! I would love to patch the style I've submitted but I don't know if it needs @media $medium_media_query and @media $large_media_query and if so, where to put them exactly. Could someone explain our breakpoint system to me?

Comments

[afuna]

The important places to put the @media $medium_media_query are where you specify styling for multiple columns (.two-columns/.three-columns -- which you can also refer to as .multiple-columns).

@media $large_media_query is used less often; mostly to adjust padding or make tweaks.

[afuna]

Note: if you're using tabula rasa as a base, and don't have anything specific to multiple columns in your style, you might not need to do anything wrt breakpoints!

[ninetydegrees]

Oh nice then! I don't think I'm doing anything with columns. I have big margins though (but customizable) so is that a problem?

[afuna]

I think for that the medium breakpoint would be a good place to shrink those! Because on smaller screens big margins can eat up space rather quickly

[ninetydegrees]

Hmm. I'm not sure how I can do this. It's an integer property which I later edit to make it a percentage, set to 20% in the layout layer. If I shrink it it means I override people's settings. I don't think I wanna do that. Should I set it to a lower value in the layout then set it to my preferred value in the themes?

[afuna]

I think that the appearance on small versus large screens is different enough that I'd treat them differently. That being said, the margins being a percentage may be enough to adjust for the differing screen size?

[ninetydegrees]

Guess I'll have to find someone with a modern smartphone to check this. Thanks again for your precious advice. :)

[afuna]

It also works to open up chrome dev tools or Firefox dev tools and set the device width in them!

(A little hard to explain but basically there's a way to force mobile view at a specific size)