Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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:
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
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
This is an accepted solution.
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:
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
Thanks!!, but remains as a kind of margin to the right
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
it workss!!, thank you
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025