[Resolved] Change table-grid- and mobile-grid- Class Value on Post Archive

[Arthur]

I noticed that the grid-25 class is added to the post_class when selecting Display Posts in Columns and selecting 4 for the number of columns. I also noticed that the tablet-grid-50 and the mobile-grid-100 classes were added as well.

The grid-25 class will change based on the number of columns selected in the Customizer.

Is there a way to change the tablet-grid- and mobile-grid- values as well?

[Leo]

Hi there,

We can use some CSS to overwrite. For example:

@media (max-width: 1024px) and (min-width: 768px) {
    .tablet-grid-50 {
        width: 33%;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Arthur]

That should work. I was wondering if there was a hook I could use to modify the output.

Also, when writing out @media queries, does it matter the order of (max-width) and (min-width)? Can I write this with (min-width: 768px) before (max-width: 1024px)?

[Leo]

I was wondering if there was a hook I could use to modify the output.

Not yet but we are hoping to implement a filter for it.

Also, when writing out @media queries, does it matter the order of (max-width) and (min-width)? Can I write this with (min-width: 768px) before (max-width: 1024px)?

I think it should work both ways – doesn’t hurt to give it a shot.

[Author]

Posts