SHOW ONLY TWO COLUMNS OF RELATED PRODUCTS ON MOBILE

  • Resolved Nastin Mfena

    (@nas9286)


    2 years, 9 months ago

    Hello.

    I am working on this Woocommerce store and I want to do something a bit outside of the box. I want to show the normal 3 suggested related products on desktop. However, I want only 2 related products shown on mobile in 2 columns.

    This is because the products appear very small on mobile when in three columns. You can try to view the link above on mobile and see what I am referring to.

    Any CSS or trick that can do the magic for me? I’ll greatly appreciate any help.

    Xo.

    • This topic was modified 2 years, 9 months ago by Nastin Mfena.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support con

    (@conschneider)

    Engineer

    2 years, 9 months ago

    Hi there,

    You can try this CSS: 

    
@media only screen and (max-width: 600px) {
  .woocommerce ul.products.columns-3, .woocommerce-page ul.products.columns-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
  
}

    Kind regards,

    Thread Starter Nastin Mfena

    (@nas9286)

    2 years, 9 months ago

    Hello.

    Thank you for this piece of code. It did what I wanted. I will go ahead and play with it to make it more User friendly.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘SHOW ONLY TWO COLUMNS OF RELATED PRODUCTS ON MOBILE’ is closed to new replies.

Tags