Remove space between pictures in collections section

Solved

Remove space between pictures in collections section

ak74
New Member
8 0 0

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                                                                                       

Screenshot 2023-03-31 at 5.51.00 AM.png

 to this

Screenshot 2023-03-31 at 5.51.07 AM.png

Accepted Solutions (3)
niraj_patel
Shopify Partner
2378 514 506

This is an 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>

techlyser_ecom_0-1680274349599.png

 

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Alok_Kasgar
Shopify Partner
112 26 28

This is an 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
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

Alok_Kasgar
Shopify Partner
112 26 28

This is an 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>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

Replies 22 (22)

Alok_Kasgar
Shopify Partner
112 26 28

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

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
ak74
New Member
8 0 0

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
Screenshot 2023-03-31 at 6.16.35 AM.png

niraj_patel
Shopify Partner
2378 514 506

This is an 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>

techlyser_ecom_0-1680274349599.png

 

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ak74
New Member
8 0 0

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
Shopify Partner
2378 514 506

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Alok_Kasgar
Shopify Partner
112 26 28

This is an 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
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
ak74
New Member
8 0 0

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

Alok_Kasgar
Shopify Partner
112 26 28

This is an 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>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
Jojje
Visitor
1 0 0

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
Tourist
20 0 2

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

niraj_patel
Shopify Partner
2378 514 506

can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
malikaclover
Tourist
20 0 2

My website URL is:

https://malikaclover.com/collections/frontpage

Password: CloverMal10

malikaclover
Tourist
20 0 2

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

niraj_patel
Shopify Partner
2378 514 506

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>

techlyser_web_0-1706719651126.png

 

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
malikaclover
Tourist
20 0 2

Thank you for the above, unfortunately it did not work 😞

malikaclover
Tourist
20 0 2

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

niraj_patel
Shopify Partner
2378 514 506

how you want to resize image?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
niraj_patel
Shopify Partner
2378 514 506

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
malikaclover
Tourist
20 0 2

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

malikaclover
Tourist
20 0 2

Right now it looks like this :

Screen Shot 2024-02-01 at 11.52.09 AM.png

 

I need it to look like this:

 

Screen Shot 2024-02-01 at 11.52.46 AM.png

niraj_patel
Shopify Partner
2378 514 506

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>

techlyser_web_0-1706807090674.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
malikaclover
Tourist
20 0 2

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 

af2f5e32-4f33-40c8-932a-92a0d9cb6853 2.jpg

 

Instead i have this under header with play button:

Screen Shot 2024-02-02 at 12.23.44 AM.png