remove css on tablet/mobile (responsive breakpoints)

Greetings. I added some CSS to create a masonry blog effect in the archive page, however, it looks terrible on mobile/tablet. So I only want to apply the CSS to Desktop.

I've read a few other support forums on the idea, but I haven't found what I'd like to call the preferred WPMUDEV way of handling this - the Upfront way.

Should I move my CSS from the element and into Global CSS and create media breakpoints? Or is there a way to add the breakpoints to element CSS?

Here is the CSS I'm using in the Posts element:

/* Masonry Custom CSS  */
/* Masonry container */
body.blog div#content, body.archive div#content, .uposts-object ul {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article, .uposts-object li {
  background-color: #eee;
  border: 1px solid #222;
  display: inline-block;
  margin: 0 0 1em;
  padding: 1em;
  width: 100%;
}
  • Luís

    Hi Logan ,

    Hope you're doing well today!

    I think you can keep the CSS on the element or move it to the Global Theme CSS, however, you should wrap the code in a media query to be applied only in the desktop, like:

    @media only screen and (min-width: 1080px) {
    
      /* Masonry Custom CSS  */
      /* Masonry container */
      body.blog div#content, body.archive div#content, .uposts-object ul {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
      }
      /* Masonry bricks or child elements */
      body.blog article, body.archive article, .uposts-object li {
        background-color: #eee;
        border: 1px solid #222;
        display: inline-block;
        margin: 0 0 1em;
        padding: 1em;
        width: 100%;
      }
    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Logan

    well...i couldn't get it to work on the element. Ended up putting this in the global css (for posterity):

    @media only screen and (min-width: 1080px) {
        body.archive div#content,
        body.archive .uposts-object ul {
          -moz-column-count: 3;
          -webkit-column-count: 3;
          column-count: 3;
          -moz-column-gap: 1em;
          -webkit-column-gap: 1em;
          column-gap: 1em;
        }
    }

    marking resolved; though if there was a 'more or less resolved' I'd click that. :slight_smile:

    In all seriousness, tho', thank you. That media query was what I needed.