how to get related products in two columns on mobiles & 4 columns on dekstops?

DeadWire3 · December 2016

only the related products on single product pages.

link: https://www.athlonindia.com/shop/gym/strength/athos/seated-leg-curl-at-7090/

Albert · December 2016

Hi,

to display 4 related products on desktop and 2 on mobile, you need to use the following css:

@media only screen and (min-width: 1240px) {
    .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
        width: 23% !important; 
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
        clear: both;
    }
}

@media only screen and (max-width: 767px) {
    .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
        width: 47% !important; 
    }
    .woocommerce ul.products li.product:nth-child(2n+1) {
        clear: both;
    }
}

DeadWire3 · December 2016

hi, thanks for the code, the second set of code worked and the mobiles now display the related products in 2 columns, but the first set of code gave me this:

Albert · December 2016

Please put this code onto your site because we do not see it anywhere at this moment.

DeadWire3 · December 2016

okay, i have put the code on to the backend. please check ASAP!

Albert · January 2017

Sorry but we still do not see it anywhere.

DeadWire3 · January 2017

Sorry I had removed the code since it was on a live site and i had not gotten a response in two days, i have put the code back again on a cloned site: https://woocommerce-31034-69132-197811.cloudwaysapps.com/shop/strength/athos/seated-leg-curl-at-7090/ please check in this link now. sorry for the inceoncinece.

Albert · January 2017

Last 2 days it was a weekend and a new year and that's why we all were off.

Anyway, to avoid unwanted behave, please replace the 1st declaration we gave you above with with the following css:

@media only screen and (min-width: 1240px) {
    .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
        width: 23% !important; 
    }
    .woocommerce ul.products li.product:nth-child(4n+1) {
        clear: both;
    }
    .woocommerce ul.products li.product:nth-child(3n+1) {
        clear: none !important;
    }
}

how to get related products in two columns on mobiles & 4 columns on dekstops?

Comments