How to adjust margin of Related Product section

Solved
Aki_TW
New Member
3 0 1

Hi

I have created a related product section by referring below article.

https://gist.github.com/carolineschnapp/1002801

 

But the actual layout that came out by my coding looks like below. So some parts of the product grid do not look responsive layout. 

https://gyazo.com/521404fb909a4ccd6fb58ad2a3b73055

 

Could anyone advise me how to fix this layout?

Store link: https://ojf2ku0yzt7bkm77-57894207664.shopifypreview.com

Them: Supply

The product that comes with the related product grid: https://ojf2ku0yzt7bkm77-57894207664.shopifypreview.com/products/test-2

Many thanks

0 Likes
Pallavi
Shopify Expert
2212 362 473

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
div#shopify-section-product-recommendations aside.grid .grid-uniform {
margin-left: 0;
}


div#shopify-section-product-recommendations aside.grid {
margin-left: 0;
}

div#shopify-section-product-recommendations aside.grid .grid-uniform .grid-item {
padding-left: 15px;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Aki_TW
New Member
3 0 1

Hi 

 

Thank you so much! It works well!

Pallavi
Shopify Expert
2212 362 473

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes