Scale and align featured products on home page

[Ghea]

Hi there,

I’m hoping this will be a relatively easy fix. I’m using a text element on my homepage with the Woocommerce shortcode mentioned below to display some featured products on my homepage.

[featured_products per_page=”3″ columns=”3″ orderby=”date” order=”desc”]

Using the code, 3 of my featured products appear on my homepage, but are aligned to the left margin by default and don’t scale down when the screen/window size changes. So when I reduce the width of my browser window, what I get is one product drops down to a second row and they are all left aligned (see screenshot).

I would like the three featured products to be centre aligned and to scale down as the page width reduces until they need to drop down onto a second row but then remain centred. Is there something I can just add to the Woocommerce shortcode to fix this?

Cheers
Tom

[jade]

Hi Tom,

This could be fixed with a simple CSS code.

Please provide us with the admin details of your site because there is a coming soon page active.

Thank you.

[Ghea]

No problem. See secure note below.

Thanks

[friech]

Hi There,

Thank you for the credentials, please add this to Theme Options > CSS

@media (min-width: 768px) {
	.home .woocommerce li.product {
		width: 30.66%;
	}
}

@media (max-width: 767px) {
	.home .woocommerce li.product {
		width: 100%;
	}
}

Hope it helps,
Cheers!

[Ghea]

Brilliant, that does exactly what I wanted. Thanks for the great support!

Cheers
Tom

[friech]

You’re more than welcome Tom, glad we could help.

Cheers