Hi guys,
I would like to have the product pictures on the product page really close to each other as shown in the picture. Could anyone help me?
Topic summary
Goal: Make product photos sit close together on the product page and remove visible white lines between items.
Key steps provided:
- In assets/base.css, reduce grid spacing by commenting out column-gap:
- In @media (min-width: 750px) for .grid: /* column-gap: var(–grid-desktop-horizontal-spacing); */
- In the base .grid rule: /* column-gap: var(–grid-mobile-horizontal-spacing); */
- To address remaining white lines on desktop 4-column layouts, in @media (min-width: 990px) for .grid–4-col-desktop .grid__item, comment out:
- /* max-width: calc(25% - var(–grid-desktop-horizontal-spacing) * 3 / 4); */
Context and confirmations:
- The requester shared the store URL (with minor typos in the messages) and confirmed the proposed tighter layout matched their expectation.
- Images were provided to illustrate the desired side-by-side look and the unwanted white lines.
Notes:
- column-gap (CSS) controls horizontal spacing between grid/flex columns; removing it tightens items.
- max-width here constrains item width, which can create visible gutters; removing it helps eliminate white lines.
Status: Initial spacing fix accepted; follow-up change for white lines provided; awaiting final confirmation (discussion likely still open).
Hi @Nienke_pr
I can help you.
Hi @Nienke_pr
Could you share your store URL?
Yes please
Yes ofcourse
@Nienke_pr Do you want this?
Yes actually
Okay, please open assets/base.css and find the following code:
@media screen and (min-width: 750px) {
.grid {
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}
}
And comment this line like this: /* column-gap: var(–grid-desktop-horizontal-spacing); */
Find the following in base.css:
.grid {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
padding: 0;
list-style: none;
column-gap: var(--grid-mobile-horizontal-spacing);
row-gap: var(--grid-mobile-vertical-spacing);
}
And comment this line: /* column-gap: var(–grid-mobile-horizontal-spacing); */
That’s it.
thank you so much. Is it also possible to remove the white lines next to the product as shown in the picture
Please find this code in base.css.
@media screen and (min-width: 990px) {
.grid--4-col-desktop .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
}
}
And comment this line: /* max-width: calc(25% - var(–grid-desktop-horizontal-spacing)* 3 / 4); */