How to make Woocommerce mobile site 2 columns for products to show

  • Resolved alexwee88

    (@alexwee88)


    6 years, 1 month ago

    Dear sir/madam

    i using storefront theme, in desktop all product show perfect, but in mobile site it is only show one column one product in home page and store page, so how to show 2 product per column in mobile site?

    thanks & regards

    Alex Wee

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

Viewing 1 replies (of 1 total)

  • Hi there,

    You can add the following CSS under Appearance > Customize > Additional CSS to display the products in two columns on mobile devices;

    ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}

@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}

    I hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘How to make Woocommerce mobile site 2 columns for products to show’ is closed to new replies.