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

[niraj_patel · Accepted solution]

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 </body> on theme.liquid

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

}
</style>

[Alok_Kasgar · Accepted solution]

@ak74 

Use below css to make collection link bigger

<style>

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

</style>

[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 · Accepted solution]

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 </body> on theme.liquid

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

}
</style>

[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 · Accepted solution]

@ak74 

Use below css to make collection link bigger

<style>

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

</style>

[ak74]

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

Thanks,

[Alok_Kasgar · Accepted solution]

Hi @ak74 

Please use this alternate solution

<style>
.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;
}
</style>

[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-...

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 </body> on theme.liquid

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

[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]

how you want to resize image?

[niraj_patel]

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

[malikaclover]

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

[malikaclover]

Right now it looks like this :

I need it to look like this:

 

[niraj_patel]

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 </body> on theme.liquid

<style>
   .card:not(.ratio) {
      width: 298px !important;
   }
</style>

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

[malikaclover]

I changed your code to 376px and it worked like wonders! Thank you so so much for your patience and your help!!!! 

Would you be able to also guide me how to set a full screen (width) background video that would play on loop (no sound) but would be under the header? 

Just as below 

Instead i have this under header with play button: