Product Pages - Stack Product Image and Product Description on Tablets

Hi

On mobile Product pages - SQSP automatically stacks the Product Image and the Product attributes i.e. Title, Description, Price etc.

Can this be extended to tablets that are up to 992px wide? 

I have large product descriptions and I do not like how the product pages look on screens that are >768px and <992px so I'd like to the force mobile view on these. 

Example product page:

www.purnamayurveda.com/therapies/p/abhyanga

Thanks

Akanksha

You can use this CSS to Website Tools > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.ProductItem .ProductItem-summary {
    flex-direction: column !important;
    align-items: center !important;
}
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    position: relative !important;
    margin-bottom: 30px !important;
}
}

10 hours ago, tuanphan said:

You can use this CSS to Website Tools > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.ProductItem .ProductItem-summary {
    flex-direction: column !important;
    align-items: center !important;
}
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    position: relative !important;
    margin-bottom: 30px !important;
}
}

 

Thanks Tuan ! (Hope you are well)

The code is working ...somewhat.

After adding the CSS, there is white space around the product item summary. I have attached screenshot.

Is there a way to make it full width?

On 8/26/2024 at 9:33 AM, tuanphan said:

Use this new code

@media screen and (max-width:1024px) and (min-width:768px) {
.ProductItem .ProductItem-summary {
    flex-direction: column !important;
    align-items: center !important;
}
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    position: relative !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}
    .ProductItem-details {
        width: 100% !important;
    }
}

 

Thank you Tuan 🙏🏽☺️