Products on Mobile

  • Resolved TheTJ

    (@measuringflower)


    8 years ago

    For the products archive page…I like how it shows the 4 products in 4 columns from a laptop/desktop. BUT…they are too tiny and some text overlaps on phone screens. So how do I tell it to show only one column (so all the products going down in just one column) on JUST mobile devices (specifically phones)?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Riaan K.

    (@riaanknoetze)

    8 years ago

    Hi there!

    Strictly speaking, this is determined by the theme you’re using rather than WooCommerce itself. With that said, you could try the following custom CSS in your WordPress settings under Appearance > Customize > Additional CSS:

    
@media screen and ( max-width: 600px ){
  .woocommerce.columns-4 > ul.products:not(.owl-carousel) li.product, 
  #page.columns_4 ul.products li.product {
    width: 100%;
  }
}

    This will force the products to show one product per row when on mobile 🙂

    Thread Starter TheTJ

    (@measuringflower)

    8 years ago

    Perfect! Thank you!

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

The topic ‘Products on Mobile’ is closed to new replies.

  • 2 replies
  • 2 participants
  • Last reply from: TheTJ
  • Last activity: 8 years ago
  • Status: resolved