How can I decrease product image spacing and expand the right side?

Store Design
, , , ,
1

Hi guys,

I would like to decrease the space between the product image, preferably by 5px, and also expand the right side. Please refer to the photo for better understanding. Thank you in advance!

URL: https://basicbastard.co/products/basic-sweater-green

Screenshot 2023-05-23 at 8.19.38 PM.png
Screenshot 2023-05-23 at 8.19.38 PM.png2876Ă—1580 329 KB

2

use this code

.grid {
    column-gap: 5px;
}
3

It doesn’t work, Thank you tho.

4

Hi @basicbastardco

Please follow the instructions below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below

NOTE: Adjust the 1rem to your desired space size

@media screen and (min-width: 750px) {
.product__media-list.contains-media {
    column-gap: 1rem;
}

.product--large:not(.product--no-media) .product__info-wrapper {
    padding-left: 1rem;
}
}
5

Hi @basicbastardco

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

@media screen and (min-width: 750px){

.product__media-list {column-gap: 5px !important;}

.product–large:not(.product–no-media) .product__info-wrapper {padding: 0 0 0 0rem !important;}

}

Regards,

San

6

Hello @basicbastardco

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product__media-list {
    column-gap: var(--grid-mobile-horizontal-spacing);
}