Hello, i would like to slightly increase the middle gap for my featured collection products, as they are slightly too close together. my store is www.antico-abito.com dawn theme
If its only for mobile use the below code @ads18922
@media only screen and (max-width: 768px) {
.product-grid {
column-gap: 20px;
}
.product-grid .grid__item {
width: calc(50% - 10px) !important;
}
}
Thanks
Hello
1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end
@media only screen and (max-width: 768px) {
.product-grid {
column-gap: 20px;
}
.product-grid .grid__item {
width: calc(50% - 10px) !important;
}
}
Looks like a duplicate – here is the link to solution in another topic
Go to Customize in your Shopify admin.
Navigate to Theme Settings → Layout.
Look for a Grid or Spacing section where you can increase the horizontal space or grid gap.
This approach avoids code and is quick to apply.