[Resolved] Media Queries vs Grid Classes

[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.

[Tom]

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 🙂

[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!

[Tom]

Yup, looks good. You just want to make sure your grid numbers add up to 100 🙂

[Author]

Posts