2 column shop view on mobile for theme twenty twenty

  • Resolved manujks

    (@manujks)


    4 years, 2 months ago

    Hi
    I would like to show 2 columns display for products on shop page in mobile view. Please help me with additional CSS code to achieve that. (I was able to achieve it in storefront theme. But that CSS tweak is not doing the needful on this theme)
    thanks in anticipation
    MK

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

    (@eastofwest)

    Hi there,

    TwentyTwenty does display products in 2 columns, but only down to a width of 668px. Narrower than that, it defaults to 100%, thus 1 column. This CSS should fix that: 

    
@media only screen and (max-width:667px) {
 .woocommerce ul.products[class*=columns-] li.product,
 .woocommerce-page ul.products[class*=columns-] li.product {
  width:50%
 }

    Add the CSS above to your child theme, or the Custom CSS box you’ll find in the Customizer.

    For context, the original CSS is in the WooCommerce plugin at the location below. In version 4.3.3 it appears on line 1555:

    /woocommerce/assets/css/twenty-twenty.css

    Thread Starter manujks

    (@manujks)

    Thanks a lot. It worked.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘2 column shop view on mobile for theme twenty twenty’ is closed to new replies.

Tags