studiojacandco Posted March 9, 2023 Share Posted March 9, 2023 Hi everyone, Just wondering how to go about changing the padding, image size, heading # etc of 'related products' when it's featured on my products page? My product image is displaying nice and small & square but my related products is huge and rectangle. There's also not enough padding/space above where it says "You Might Also Like", and I'd like to change the size of this heading. https://www.studiojacandco.com.au/resources/p/instagram-audit Thanks in advance 🙂 Jaclyn Link to comment
Solution tuanphan Posted March 12, 2023 Solution Share Posted March 12, 2023 Add to Design > Custom CSS h2.ProductItem-related-label { padding-top: 40px; padding-bottom: 20px; } @media screen and (min-width:768px) { .ProductItem-relatedProducts.ProductList.clear .list-grid { grid-template-columns: repeat(3,1fr); } } 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
studiojacandco Posted March 13, 2023 Author Share Posted March 13, 2023 That's much better, thank you!! Do you know how I can make the related product image/s the same size & shape as the product image? Currently the main product is square but my related product is portrait/rectangle. Link to comment
tuanphan Posted March 16, 2023 Share Posted March 16, 2023 On 3/14/2023 at 5:38 AM, studiojacandco said: That's much better, thank you!! Do you know how I can make the related product image/s the same size & shape as the product image? Currently the main product is square but my related product is portrait/rectangle. Add to Design > Custom CSS /* Related Products */ .ProductItem-relatedProducts .grid-image-wrapper { padding-bottom: 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!) Link to comment
TWBDesign Posted June 9, 2023 Share Posted June 9, 2023 Hi @tuanphan, would you know how to display the related products as stacked vertically, rather than in a horizontal row? With the images 50% width (on the left) and the product titles beside them (on the right). Thank you! Link to comment
tuanphan Posted June 11, 2023 Share Posted June 11, 2023 On 6/10/2023 at 12:47 AM, TWBDesign said: Hi @tuanphan, would you know how to display the related products as stacked vertically, rather than in a horizontal row? With the images 50% width (on the left) and the product titles beside them (on the right). Thank you! Like this? 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