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.c…

Hello @ak74 You can add code by following these steps to remove spaces between images on collection list homepage Go to Online Store → Theme → Edit code. Open your theme.liquid file Paste the below code before on theme.liquid @media screen and (min-width: 767px) { .collection-list.gri…

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?

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

@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%; } }

there is still space on the right side of the page, please refer to the photo below. Thanks, [Screenshot 2023-04-01 at 3.51.54 AM.png]

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?

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

My website URL is: https://malikaclover.com/collections/frontpage Password: CloverMal10

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

Remove space between pictures in collections section

Store Design

Alok_Kasgar April 1, 2023, 11:54am 9

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; }

Topic		Replies	Views
Image Size and Padding between Images Collection List Homepage. I am using the Brooklyn Theme Store Design	14	103	November 17, 2022
Changing the gap between product pictures in collection pages and reducing side margins Store Design	11	1045	November 28, 2023
Remove padding between products in collection page Store Design design , customizations , collection-page , css , third-party-themes , shopify-themes , html	3	55	March 19, 2024
Customize collection list appearance Store Design design , collection-page , css , html	4	94	November 14, 2024
Change product image frame on collection page Store Design customizations , collection-page , css	2	25	March 10, 2024

Remove space between pictures in collections section

Related topics