Related products 2 columns on mobile

[zoepayne42]

Hi,

I have ‘related products’ set up on my WooCommerce product pages. It is currently showing as a single column when viewed on a mobile device.

Please can you advise how I get it to show as 2 columns on a mobile device?

Example product page here:
https://www.sandandseagulls.co.uk/product/pirate-pete-drinking-jar/

Many thanks

[jade]

Hey Zoe,

Please add this code in X > Theme Options > CSS:

@media (max-width: 480px) {
    .woocommerce .related.products.cols-3 li.product, 
    .woocommerce .related.products.cols-4 li.product, 
    .woocommerce.columns-3.related.products li.product, 
    .woocommerce.columns-4.related.products li.product {
        width: 48%;
    }

    .woocommerce .cols-3.related.products li.product:nth-child(2n+2), 
    .woocommerce .cols-4.related.products li.product:nth-child(2n+2), 
    .woocommerce.columns-3.related.products li.product:nth-child(2n+2), 
    .woocommerce.columns-4.related.products li.product:nth-child(2n+2) {
        margin-right: 0;
    }
}

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[zoepayne42]

perfect thanks!

[jade]

You’re most welcome, Zoe.

[lely]

You’re always welcome!

Cheers.