Changing the gap between product pictures in collection pages and reducing side margins

[Yubran]

Hello dear Shopify Community, hope you are doing fine.

As the title suggests, I am trying to reduce the gap between the images when you are for example inside a collection page. Also at the home page the “you might also like” section, i would like to reduce the space between the pictures and also reduce the side margins of the pictures to the borders of the screen.

I want to achieve this, by increasing the picture’s size.

Screenshot of my webseite in mobile modus:

Screenshot of how I want it to be(please note the side margins and gaps between the pictures)

As you can see in the example below, the pictures are bigger and the side margins are almost gone.

If you still have any questions, please contact me.

Would someone happen to know the solution to this?

Thank you alot dear community,

Best wishes.

[KetanKumar]

@Yubran

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Yubran]

Oh hello @KetanKumar

Thank you very much for your support. Here is the Link of my webseite:

https://radikalhomes.com/

Password: mewrta

Please let me know if you need any more information.

Thank you

[KetanKumar]

@Yubran

thanks or url can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#Collection {padding: 0px;}
#Collection .grid--view-items {margin-left: -1px;}
#Collection .grid--view-items .small--one-half {padding-left: 1px;}
}

[Yubran]

You are a god mate.

It works. I hope this helps other people facing the same issue.

I thank you alot and wish you a good weekend.

[Yubran]

@KetanKumar I notice though at the home page the “you would also like” pictures are still the same as old. Why did these not change as per the ones in the collections?

Please see Screenshot . Those are still same ugly old

[KetanKumar]

@Yubran

its my pleasure to help us

also this code work only all collection page

[KetanKumar]

@Yubran

yes, please add this code at home related section

@media only screen and (max-width: 749px) {
#shopify-section-collection .page-width {padding: 0px;}
#shopify-section-collection .grid--view-items {margin-left: -1px;}
#shopify-section-collection .grid--view-items .small--one-half {padding-left: 1px;}
}

[Yubran]

That also worked You are a wizard.

Thank you!

[KetanKumar]

@Yubran

Thanks for your all compliments

[Alliance]

Hi,

I need to align all product products titles in collections.

Thank you

allianceautoproducts.com

[KetanKumar]

@Alliance

oh sorry but i can’t se your store please resend new link