AkankshaK Posted August 21 Posted August 21 (edited) 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 Edited August 21 by AkankshaK
tuanphan Posted August 23 Posted August 23 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
AkankshaK Posted August 23 Author Posted August 23 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?
Solution tuanphan Posted August 26 Solution Posted August 26 On 8/24/2024 at 3:10 AM, AkankshaK said: 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? 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
AkankshaK Posted September 5 Author Posted September 5 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 🙏🏽☺️
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment