Reduce width of product images on product page - desktop

[ads18922]

Hello, i would like to reduce the width of my product images on my product page, as i feel the images take up 2/3 of the product page:

my store is www.antico-abito.com , theme is dawn

[Dev_Inflame]

Hey @ads18922 ,

You can adjust the width of your product images width in pdp page using customizer.

Please follow this steps :
Dashboard → click on customize button → click on any product

If its works please let me know.

Thank you

[Manoj_j]

Hi @ads18922 ,
go to base.css and add this code at the bottom

.product__media.media--transparent {
  width: 66.66%;   /* 2/3 width */
  margin: 0 auto;  /* center it */
}

.product__media.media--transparent img {
  width: 100%;
  height: auto;
}

Save and refresh preview
here is the result

Thanks
Manoj

[Small_Task_Help]

@ads18922

theme is dawn

Hi,

Hope this will help

• Option A: Use Custom CSS

CSS example

@media screen and (min-width: 990px) {
  .product.grid--2-col-desktop {
    grid-template-columns: 0.4fr 0.6fr; /* images 40%, details 60% */
    column-gap: 3rem; /* nice spacing, optional */
  }
}

• Option B : Edit the theme CSS file (If Custom CSS box doesn’t accept @media rules)

/* Make product images narrower on desktop */
@media screen and (min-width: 990px) {
  .product.grid--2-col-desktop {
    grid-template-columns: 0.4fr 0.6fr;
    column-gap: 3rem;
  }
}