Product page photo next to each other

[Nienke_pr]

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?

[vinh0225]

Hi @Nienke_pr 

I can help you.

[Nienke_pr]

Yes please

miyucollective.com

[vinh0225]

@Nienke_pr Do you want this?

[Nienke_pr]

Yes actually 

[vinh0225 · Accepted solution]

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.

[Nienke_pr]

thank you so much. Is it also possible to remove the white lines next to the product as shown in the picture 

[vinh0225]

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); */

[Dan-From-Ryviu]

Hi @Nienke_pr 

Could you share your store URL? 

[Nienke_pr]

Yes ofcourse 

miyucollective.com