Intermediate size media query

[Talkpoppycock]

I might be gilding the lily, but I thought it would be a good idea to add the an intermediate sized media query so that I could add intermediate sized units. This I did as follows:

Css:

/* Added imtermediate sizes */
@media screen and (min-width: 320px) and (max-width: 560px) {
    .grid .small-whole,          .grid .ws-1-1 { width: 100%; }
    .grid .small-half,           .grid .ws-1-2 { width: 50%; }
    .grid .small-one-third,      .grid .ws-1-3 { width: 33.3332%; }

    .grid .unit {
         /*width: 100% !important;*/
         padding-left: 20px;
         padding-right: 20px;
    }

    .unit .grid .unit {
        padding-left: 0;
        padding-right: 0;
    }

    /* Sometimes, you just want to be different on small screens */
    .center-on-mobiles { text-align: center !important; }
    .hide-on-mobiles { display: none !important; }
}

Html:

    <div class="grid">
        <div class="unit unit one-third ws-1-2">
            <pre>one-third & small half</pre>
        </div>
        <div class="unit unit one-third ws-1-2">
            <pre>one-third & small half</pre>
        </div>
        <div class="unit unit one-third ws-1-1">
            <pre>one-third & small whole</pre>
        </div>
    </div>

This does the trick with one exception, padding is now incorrect. Try as I may I can't seem to find the answer. Any help would be gratefully accepted.

[cobyism]

Thanks for bringing this up :smile: — would this be something that the changes in https://github.com/cobyism/gridism/pull/15 would solve, by any chance? I feel like just specifying a "no stacking on mobile" class on a wrapper element around anything you want to stay next to each other involves less work than adding an additional class name to each element here. I understand that the way you’re proposing things would allow something to appear as a .third on desktop, and drop down to appear like a .half on mobiles, but I can’t imagine wanting that personally on many of the projects I’ve worked on, since I usually either want things all in a row or all vertically. Might just be me though…

Let me know what you think :grin:

[Talkpoppycock]

I'm not certain is the honest answer. I thought, as they say a picture saves a thousand words, I would illustrate exactly what I had in mind. The top illustration is what I call a desktop layout. What I would describe as the default design layout. There then follows the intermediate layout that I am describing and seeking, followed by what I'll call a mobile portrait layout.

Whilst I appreciate what you say regarding wanting a vertical stack on small screens, it seems a shame to abandon all the hard work of a good visual layout until you absolutely have to.

[kokujin]

What a coincidence, this is something I was asking myself a few days ago. I would prefer "no stacking on mobile" class. Has this been merged in the master branch @cobyism ?

[cobyism]

@kokujin Just merged #15 in and bumped the version to 0.1.0 today, so the .no-stacking-on-mobiles class should be good to go :metal:

@Talkpoppycock I hear what you’re saying with the desire to specify custom intermediary layouts for each breakpoint, but I think that a good solution for that involves more complexity than I want this project to have. I’m going to close this issue, but if you have a good suggestion for a way to implement the intermediate layout idea (I’d love to see a pull request!), then I’ll definitely take a look. Thanks again for the suggestion! :+1: