Woocommerce Products

[ROBIN]

Hi

I have been using AI to help figure out how to make the products I am showing on this website stack one on top of the other on mobile instead of two next to each other.

Here is a page that I am working on:  https://bellaann.com/reserve-collection/

Here is the shortcode

[products ids=”19331, 19318, 19285, 19266, 19258, 19248, 17771, 17027, 16990, 18333, 18149, 16619″ columns=”4″]

On mobile it converts to columns 2 and I really need each product to stack on top of the other because my client is unhappy that on different size screens the two products next to each other don’t line up perfectly. On my phone they are perfect, but on his I phone they are not.

Here is the last code it gave me
@media (max-width: 768px) {
.woocommerce ul.products > * {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
}

After a half dozen CSS options, I just gave up with the robot.

Any help you can give would be greatly appreciated

Thanks

[scrambler]

@ROBIN The layout is done by WooCommerce CSS, so ideally you need a WooCommerce option to set the number of columns to One instead of two on mobile.
WooCommerce rule clears a row every even product and set the width to 48%.

Below is a rule that overrides the WooCommerce one doing that, clearing every image and enlarging the width.

But I would strongly suggest you first check with WooCommerce if they have the option or would consider it, as overriding a plugin CSS can break if they change theirs…

@media only screen and (max-width: 768px) {
.woocommerce ul.products[class*=columns-] li.product:nth-child(2n),.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
float: left !important;
clear: both !important;
}
.woocommerce ul.products[class*=columns-] li.product,.woocommerce-page ul.products[class*=columns-] li.product {
width: 98%;
}
}

[Author]

Posts