reduce columns between each product photo

Solved

reduce columns between each product photo

nerveconcepts
Excursionist
36 0 2

How can I reduce these columns between each product photo?

I would like them to be 1px each and not to alter the margins on the sides of the page. i mean that the images on the edges are at the edge of the screen.

 

https://nerve-concepts.com/Captura de pantalla 2024-04-03 222225.png

Accepted Solutions (2)

LuffyOnePiece
Shopify Partner
650 93 119

This is an accepted solution.

Hi @nerveconcepts 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
ul.product-grid {
    column-gap: 1px !important;
}
</style>

 Result:

LuffyOnePiece_0-1712208692237.png

 

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

LuffyOnePiece
Shopify Partner
650 93 119

This is an accepted solution.

Hi @nerveconcepts ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code too just above tag </body>

<style>
@media screen and (min-width: 990px){
    .grid--4-col-desktop .grid__item {
        max-width: calc(25% - 0.75px);
    }
}
</style>

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 4 (4)

LuffyOnePiece
Shopify Partner
650 93 119

This is an accepted solution.

Hi @nerveconcepts 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
ul.product-grid {
    column-gap: 1px !important;
}
</style>

 Result:

LuffyOnePiece_0-1712208692237.png

 

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
nerveconcepts
Excursionist
36 0 2

Thanks!!, but remains as a kind of margin to the right Captura de pantalla 2024-04-03 223501.png

LuffyOnePiece
Shopify Partner
650 93 119

This is an accepted solution.

Hi @nerveconcepts ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code too just above tag </body>

<style>
@media screen and (min-width: 990px){
    .grid--4-col-desktop .grid__item {
        max-width: calc(25% - 0.75px);
    }
}
</style>

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
nerveconcepts
Excursionist
36 0 2

it workss!!, thank you