Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Media Queries vs Grid Classes

Home Forums Support [Resolved] Media Queries vs Grid Classes

Home Forums Support Media Queries vs Grid Classes

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #449083
    Maria

    I’m trying to make my site responsive and can’t quite wrap my head around the unsemantic grid classes outlined here: https://unsemantic.com/css-documentation#2-grid-classes and these media queries from GPP docs: @media (max-width: 768px) {
    /* CSS in here for mobile only
    }

    @media
    (min-width: 769px) and (max-width: 1024px) {

    }

    @media
    (min-width: 1025px) {
    /* CSS in here for desktop only */
    }

    Which do I use? I understand media queries, but the grid classes are confusing me.

    GeneratePress 2.0
    GP Premium 1.5.6
    #449132
    Tom
    Lead Developer
    Lead Developer

    If you use the built-in classes, the CSS has been written for you and those built-in media queries will apply to those classes.

    If you want to use custom classes, you can write your own media queries for them.

    Let me know if that makes sense or not ๐Ÿ™‚

    #450593
    Maria

    Makes sense now. I just want to make sure I’m doing it right. On demo site https://presser.demo.site
    did I add the classes correctly?

    <div class="grid-container">  
         <div class="prefix-20 grid-60 suffix-20 tablet-prefix-20 tablet-grid-60 tablet-suffix-20 mobile-100">
               <div class="grid-20 post-content-img"></div>
               <div class="grid-60 post-content-container">
                 <div class="post-content">
                 <p class="postdate">December 17, 2017</p>
                 <h3 class="title">The Season's Biggest Trends</h3>
                 <p class="excerpt">Here's how to get the look</p>
                 <p class="byline">by Suzy Que</p>
                 </div>
              </div>
       </div>
    </div>

    Seems to scale correctly, but seems like a lot of classes to have to add so I just want to be sure. Thanks for your help and all you do. I’m really enjoying your theme!

    #450649
    Tom
    Lead Developer
    Lead Developer

    Yup, looks good. You just want to make sure your grid numbers add up to 100 ๐Ÿ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.