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

Home Forums Support Change table-grid- and mobile-grid- Class Value on Post Archive

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #920970
    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?

    #920976
    Leo
    Staff
    Customer Support

    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 🙂

    #920982
    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)?

    #920983
    Leo
    Staff
    Customer Support

    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.

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