ninetydegrees: Drawing: cute piggie waving hello (hi)
Ninety Degrees (90d) 🌻 ([personal profile] ninetydegrees) wrote in [site community profile] dw_dev_training2015-07-16 11:57 am

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

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?
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2015-07-17 04:10 am (UTC)(link)
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: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2015-07-17 04:11 am (UTC)(link)
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!
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2015-07-17 11:49 pm (UTC)(link)

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

afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2015-07-20 02:19 am (UTC)(link)

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?

afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2015-07-29 02:42 pm (UTC)(link)

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)