Woocommerce product page on mobile - "you may also like" stacking in one column wrongly

user_14685989 0
Viewed 414

If you view our product page on mobile ...

https://www.charliecustards.co.uk/product/the-charlie-montreux-brogue-chelsea-boot-in-autumn-calf-leather/

... and scroll down to the "you may also like" section you will see it is not in rows of two products, as it should be. It is in one column stacked with a big white space down the side of each item in the stack where it clearly should be placing the other product.

What is the code so it shows two products next to each other (rows of two) when this section stacks on mobile? I've tried everything under the sun and can't get it to co-operate!

Also see screen capture which shows the issue clearly. Thank you so much all!

screen capture of incorrect mobile stacking on woocommerce you may also like section of a product page

woocommerce mobile wordpress css
1 Answers

You currently have this code:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product {
    float: none!important;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;
}

You have to change it to:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;
}

You have to remove the !important rule from the float property.

user_104471970
Related