nancyk Posted October 12, 2019 Share Posted October 12, 2019 Hi, How can I make the image on the Product Details Page on the Brine eCommerce template smaller? Link to comment
tuanphan Posted October 13, 2019 Share Posted October 13, 2019 @nancyk You can add this code to Home > Design > Custom CSS @media screen and (min-width:641px) { /* Decrease Image Width */ .ProductItem-gallery { width: 40%; } /* Increase Detail Width */ .ProductItem-details { width: 60%; } } nancyk 1 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!) Link to comment
nancyk Posted October 15, 2019 Author Share Posted October 15, 2019 thank you! @tuanphan Link to comment
tuanphan Posted October 15, 2019 Share Posted October 15, 2019 @nancyk If the code worked. you can click "Like" (heart icon, right) Thanks. 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!) Link to comment
nancyk Posted October 16, 2019 Author Share Posted October 16, 2019 (edited) @tuanphan, I just clicked the "like" button. One more thing: how can I make the images smaller on mobile, too? Edited October 16, 2019 by nancyk Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @nancyk @media screen and (max-width:640px) { .ProductItem-gallery { max-width: 50%; margin: 0 auto; } } nancyk 1 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!) Link to comment
GemmaT Posted June 2, 2022 Share Posted June 2, 2022 Hi! I am having a similar issue with 7.0 template, @tuanphancould you possibly help out? I would like the product images to be smaller so when on desktop, you can see there are thumbnails below without having to scroll down. here is a product page that shows the image too big https://www.gemmathorpe.com/prints-products/ginkgo and here is a landscape image with a similar issue. Is it possible to reduce the space between the top of the images and the title on the top right? https://www.gemmathorpe.com/prints-products/the-li-river Site22Sh>JC to access site Thank you! Link to comment
tuanphan Posted June 3, 2022 Share Posted June 3, 2022 (edited) 13 hours ago, GemmaT said: Hi! I am having a similar issue with 7.0 template, @tuanphancould you possibly help out? I would like the product images to be smaller so when on desktop, you can see there are thumbnails below without having to scroll down. here is a product page that shows the image too big https://www.gemmathorpe.com/prints-products/ginkgo and here is a landscape image with a similar issue. Is it possible to reduce the space between the top of the images and the title on the top right? https://www.gemmathorpe.com/prints-products/the-li-river Site22Sh>JC to access site Thank you! #1. Add to Design > Custom CSS @media screen and (min-width:641px) { div#productGallery { width: 35%; } } #2. It is white space inside image See this: Edited June 3, 2022 by tuanphan 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!) Link to comment
GemmaT Posted June 4, 2022 Share Posted June 4, 2022 On 6/3/2022 at 7:11 AM, tuanphan said: #1. Add to Design > Custom CSS @media screen and (min-width:641px) { div#productGallery { width: 35%; } } #2. It is white space inside image See this: Thanks so much @tuanphan this is perfect! #2 - a workaround to create space between the image and thumbnails underneath. I guess there are limited design options for product images as it's difficult if you have both portrait and landscape. I see now that the title won't align unless I remove this white spacing! thanks again for your help. 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