Product Grid only displaying one row

  • Resolved jessmfelt

    (@jessmfelt)


    2 years, 8 months ago

    I’m using WPBakery. It was previously showing 4 columns of products on the main page but now it is only showing 1 column of products and they’re huge. It almost looks like it’s stuck in mobile view? Any advice on what might be going on?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @jessmfelt,

    Add the below CSS to your CSS file to fix this issue on mobile as well as desktop.

    .modern-grid{
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    row-gap: 1em;
}
.modern-grid .grid-item{
    opacity: 1 !important;
}

/* This css fix product layout in Tablets  */
@media (max-width: 980px){
    .modern-grid{
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1em;
        row-gap: 1em;
    }
}

/* This css fix product layout in mobiles  */
@media (max-width: 600px){
    .modern-grid{
        display: block;
    }
}
    Thread Starter jessmfelt

    (@jessmfelt)

    Wow, I can’t thank you enough!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Product Grid only displaying one row’ is closed to new replies.

Tags