AngelaB Posted August 24, 2022 Share Posted August 24, 2022 Site URL: https://www.angelabritton.co.uk Hi there, On desktop I have my 2 images in each product page, set to stacking. On mobile these images are automatically put into a carousel which was fine, but the images were cropped top and bottom, taking some of the product with them. So I found this code (below) to stop the cropping but now I have another problem - the product image carousel is now much smaller than the images in the shop category sections, which looks weird - they need to fill the mobile screen like they do in the category sections. This is the code I used and attached are images of a shop category section and a product page: @media screen and (max-width:767px) { img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } } .products.collection-content-wrapper .grid-image-hover { opacity: 0 !important; } .products.collection-content-wrapper .grid-image-cover { opacity: 1 !important; } Thanks for any help 🙂 Link to comment
tuanphan Posted August 27, 2022 Share Posted August 27, 2022 Hi. What is access password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AngelaB Posted August 30, 2022 Author Share Posted August 30, 2022 Sorry for the delay - it's Angela Link to comment
AngelaB Posted September 3, 2022 Author Share Posted September 3, 2022 Hi Tuanphan, Sorry to bother you but any thoughts? Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/3/2022 at 4:14 PM, AngelaB said: Hi Tuanphan, Sorry to bother you but any thoughts? Try this to Design > Custom CSS /* Mobile individual products images */ @media screen and (max-width:767px) { body.view-item img.ProductItem-gallery-slides-item-image { object-fit: cover !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AngelaB Posted September 6, 2022 Author Share Posted September 6, 2022 Thank you for your reply, but this takes me back to my original problem - the images are cut off on the top and the bottom. I've tried this with and without the original code I used and it doesn't work. I just want the product images to be the same size as the shop images but they're either cropped or go tiny if I try and fix the cropping. Is this something you can look at - perhaps it's something I've done? Link to comment
tuanphan Posted September 7, 2022 Share Posted September 7, 2022 https://www.angelabritton.co.uk/shop/p/brio-1 Try adding to Design > Custom CSS @media screen and (max-width:767px) { .tweak-product-basic-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before { padding-bottom: 120%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AngelaB Posted September 7, 2022 Author Share Posted September 7, 2022 This worked perfectly...thank you Tuanphan 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment