Remove space between pictures in collections section

[ak74]

Greetings,

I have noticed that the Collection List images on my home page appear to have spacing between them. I was wondering if there is a way to remove that spacing and have images stick to each other as the pic attached below. Would anyone happen to know how to do this?

Thank you.

alignaide.com

from this

to this

[Alok_Kasgar]

Hi @ak74
You must remove padding of images box. Share page url so I can provide exact css code

[ak74]

Hello there,

It is a collections box, you should see it at alignaide.com if you scroll down in the homepage. I have removed the padding from the collection section but the images are named images so this setting to remove padding is not available.

I hope you can help

Thanks

[niraj_patel]

Hello @ak74

You can add code by following these steps to remove spaces between images on collection list homepage

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 767px) { .collection-list.grid { column-gap: 0 !important; } }

[ak74]

Thank you so much! it worked.

How can I get it to take have the pictures bigger and fit across the screen from left to right?

[niraj_patel]

Hello @ak74
It needs to modify slider code to fit on the screen

[Alok_Kasgar]

@ak74

Use below css to make collection link bigger

@media (min-width:768px) { .collection-list-wrapper.page-width{ margin: 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0; max-width: 100%; } }

[ak74]

there is still space on the right side of the page, please refer to the photo below.

Thanks,

[Alok_Kasgar]

Hi @ak74

Please use this alternate solution

.collection-list-wrapper.page-width { margin: 0; padding: 0; max-width: 100vw; } .collection-list-wrapper .grid--4-col-desktop .grid__item.collection-list__item { width: 25%!important; max-width: 25%!important; }

[Jojje]

Hi. I want to have a seemless look betweeen my photos, same as this:

https://www.ulefone.com/armor-x13.html

Today it looks like this:

https://qmo6k09ve7qrr1yp-40562163873.shopifypreview.com/collections/armor-x-series/products/copy-of-ulefone-armor-x13

What do I need to do?

[malikaclover]

Hello im interested in the same but the code you’ve given does not work

[niraj_patel]

can you share store URL?

[malikaclover]

My website URL is:

https://malikaclover.com/collections/frontpage

Password: CloverMal10

[malikaclover]

In the wearables products page, I have framed images that i would like to be touching side by side

[niraj_patel]

Hey @malikaclover

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .product-grid-container ul#product-grid { column-gap: unset !important; } }

[malikaclover]

Thank you for the above, unfortunately it did not work

[malikaclover]

Also im trying to resize the images slightly how would I do that?

[niraj_patel]

That code working, There is no gap between in images.

[niraj_patel]

how you want to resize image?

[malikaclover]

There is still space between the images, i need the frames touching side by side