threadsonline Posted March 15 Share Posted March 15 Hi guys, Can someone help me add a divider on my product detail page? There is the option to add this on all other pages but not this one for some reason? I have one on all my other pages as an example, it sits right above the footer. Also whilst i'm here, is someone able to provide a code to decrease the height on my product photos on mobile view only? Thanks! URL: https://threadsonline.co.uk/store/p/cp-company-zipped-overshirt Link to comment
E-W Posted March 15 Share Posted March 15 You could simply add the border line to the footer to ensure it shows up on every page of your website. Or you could add the following code to add it only to the product detail pages: .tweak-products-width-full .products.collection-content-wrapper{ border-bottom: 1px solid rgba(0, 0, 0, .12); } For the height of images on mobile I'd try: @media screen and (max-width: 767px){ .ProductItem-gallery-slides-item{ height: 80%!important; } And change the percent to whatever height you like. Link to comment
threadsonline Posted March 15 Author Share Posted March 15 13 minutes ago, E-W said: You could simply add the border line to the footer to ensure it shows up on every page of your website. Or you could add the following code to add it only to the product detail pages: .tweak-products-width-full .products.collection-content-wrapper{ border-bottom: 1px solid rgba(0, 0, 0, .12); } For the height of images on mobile I'd try: @media screen and (max-width: 767px){ .ProductItem-gallery-slides-item{ height: 80%!important; } And change the percent to whatever height you like. They both worked - thanks! But now I've got a massive gap between the product photo & title... could you help? Link to comment
threadsonline Posted March 15 Author Share Posted March 15 6 minutes ago, threadsonline said: They both worked - thanks! But now I've got a massive gap between the product photo & title... could you help? Also I now need to move my controls up to the center on the image on mobile view, could you help? Also if you know how to remove the '1/2' in the top right hand corner that would be great 🙂 Link to comment
E-W Posted March 15 Share Posted March 15 Try this instead of the other code: .ProductItem-gallery{ height: 50vh!important; } Link to comment
E-W Posted March 15 Share Posted March 15 This will hide the photo counter numbers: .ProductItem .ProductItem-gallery-current-slide-indicator{ display: none; } Link to comment
threadsonline Posted March 15 Author Share Posted March 15 31 minutes ago, E-W said: Try this instead of the other code: .ProductItem-gallery{ height: 50vh!important; } Unfortunately this one just snips the photo (pls see screenshot) & Thanks the photo counter number one worked 🙂 Link to comment
tuanphan Posted March 18 Share Posted March 18 On 3/15/2024 at 9:19 PM, threadsonline said: Unfortunately this one just snips the photo (pls see screenshot) & Thanks the photo counter number one worked 🙂 I see it already centered to me 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
threadsonline Posted March 18 Author Share Posted March 18 5 hours ago, tuanphan said: I see it already centered to me Hi Tuan, the above code snipped my image, it is supposed to look like this (attached). I just want to decrease the height of the image in mobile display as it takes up the whole page. Link to comment
tuanphan Posted March 20 Share Posted March 20 You can use this CSS code /* Mobile Product Gallery Height */ @media screen and (max-width:767px) { .tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before { padding-bottom:70% !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!) 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