singularitygs - Why change the grid-size when switching media-query? -

I am using singularity for a small year now and I am still not 100% Using the full capacity or "right" way in reality

My main question is why should you change the grid-size based on the media-query.

I am using SGS at this time:

  grid: 12; $ Gutter: 1/2; .column {// Mobile first ... Full-width @ breakpoints ($ through-medium) {// Medium devices include 2 columns - Grid-duration (6, first); & Amp;: Include nth-child (even) {@ grid-term (6, last); }} @ Include breakpoint (bigger $) {// 3 columns @ large devices included Grid-duration (4); & Amp ;: nth-child (even) {@ grid-duration (4) included; // need to override the previous MQ because I'm only using minimum-width. } & Amp ;: nth-child (3n) {@ grid duration included (4, last); } & Amp ;: nth-child (3n + 1) {@ grid duration included (4, previously); }}}  

I would love to reduce the code for this and maybe there is a grid changing between the help of MQ, but how am I not seeing?

I have different columns for different screen sizes so that the gutter size is consistent.

If you have a grid definition, then all the grid columns, then small screens - for small gutter, for example, a portrait phone screen (320px wide) each gutter is only <2.4> With a grid definition of / code> (that is, 12 columns and drain size is 0.1). It looks ridiculously small and ruined grid.

On the other hand, if you had a grid of 3, 0.1 320px screen, then the gutter size was 10px enough.

Not only the gutar shapes in your screen sizes, but also columns. Take a look at the left demo on this page: When you adjust the width of the browser window, the width of each item in the grid changes to the estimated extent. To wit. It is always on any device between 154 and 180 pixels.

This approach changes your mind model of responsive web design. Now you can design with continuous blocks which fit in certain columns regardless of the device.

To use more from this point of view, I recommend changing the element questions from the media query. Element queries require some JS support, you need a JS library. Many implementations are not ideal from singular authors, but certainly the best.