Dwell theme product image sizing

[Lohamp]

The product image when using the dwell theme is very large on a desktop view. I have tried resizing by editing the code, but I am not well informed. If I get the product image smaller it alters the formatting of the entire page and leaves huge gap between the product image and details. Having sizing issues with product page images and collection images on main page.

I have tried other themes where there is a theme setting and it is easy, but that option is not presenting itself in the dwell settings. I really want the dwell theme to work, but im struggling. Can someone help, please? URL is https://crafted-pull-magnets.myshopify.com Password is November

[Lohamp]

@Small_Task_Help

/* ------- Dwell theme: product & collection image sizing fixes ------- */
/* 1) Make the product area use flexible columns so image + details sit together */
.product-single, .product-template, .product__container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 20px !important; /* space between image and details */
}

/* 2) Size the image column so it does not get huge on large screens */
.product-single__media,
.product__media,
.product-single__photos,
.product-gallery,
.product-image-wrapper {
  flex: 1 1 45% !important; /* image column width (45% of row) */
  max-width: 720px !important; /* max width for very large screens */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3) Size the details column so it sits beside the image */
.product-single__info,
.product__details,
.product-info-wrapper {
  flex: 1 1 45% !important;
  min-width: 280px !important; /* prevents details from collapsing */
  box-sizing: border-box !important;
}

/* 4) Make the actual <img> behave: don't stretch, keep aspect ratio */
.product-single__media img,
.product__media img,
.product-gallery img,
.product-image-wrapper img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* show whole image without cropping */
  display: block !important;
}

/* 5) Remove any forced fixed heights that create a big blank gap */
.product-single__media,
.product__media,
.product-gallery,
.product-image-wrapper {
  height: auto !important;
  min-height: 0 !important;
}

/* 6) Collection / homepage grid images: keep uniform thumbnails */
.collection-grid-item img,
.collection__item img,
.grid-item__image img,
.card__media img {
  width: 100% !important;
  height: 220px !important; /* thumbnail height — change to taste */
  object-fit: cover !important; /* crops to fill the box neatly */
}

/* 7) Responsive: on small screens, stack image above details */
@media (max-width: 767px) {
  .product-single, .product-template, .product__container {
    flex-direction: column !important;
  }
  .product-single__media,
  .product__media {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .product-single__info {
    flex-basis: 100% !important;
  }
}

Thank you for the code. Unfortunately, even when I make the 45%, max-width, and collection height value changes as suggested nothing changes

[tim_tairli]

I’d try to undo your edits first.

Try this:
Make sure that your product info section has “page” selected as “width” under “layout”.

Then uncheck this setting:

This should make your product page images significantly smaller.

If not, you should use “Custom CSS” setting of this section. Do not edit theme code for changes like this.

In “Custom CSS” you can use code like this and change the values as you see fit.
Originally it’s 2fr 1fr meaning media gallery will be two times wider than product info panel. You can try 3fr 2fr, or 2fr 2fr (this will make them same width).

@media screen and (min-width: 1200px) {
.product-information--media-left {
    grid-template-columns: 2fr 2fr; /* media to info ratio */
  }
}

[Wulf]

Hello! Same problem with this theme here!

If i choose Square, it crops the image. But if not choosing the suqare: image is super huge:

This is unusable for customers if they browse with desktop. I currently have this in custom css:

.product-card img,
.product-card .media img,
.product-card .media > div > img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}

This corrects Dwell themes image problem in collection pages, but not in product pages.

Any ideas how to resolve?

[Maximus3]

@Wulf

It doesn’t look like there is anything to resolve. You have a long product image, it’s set to auto, and contain. Other settings, like equal columns in Product Information will help the layout. Here is an extra long product image

There is nothing wrong here. It displays the full image, everything is on screen, and you can add more things in the right column to take the extra space. If you want to make your image smaller, you are able to do that as well.

[Wulf]

Hi, thanks for reply!

I understand your point of view, but some other themes doesn’t crop images like that if I put square ratio. Maybe I explained it badly, but that was what I was aiming for.

Square is what i’m looking for in product pages, and I understand it is a long image, I just want it to scale all images smaller as it is in square.

So how could I get it to be square in all pages but without cropping the image? As other themes are handling images like that.

Cheers!

[Maximus3]

Personally, if I wanted square images, for both the product page, and the product card, I’d make the image square in photoshop or something, put a white background on it, and upload it. That way, it’s square already.

[tim_tairli]

Usually, something like below, added to section “Custom CSS” should take care of your problem:

.media-fit-cover .product-media__image {
  object-fit: contain;
}

Before/After:

→

[Wulf]

@tim_tairli

.media-fit-cover .product-media__image {
  object-fit: contain;
}

Thank you this works perfectly, just what I meant!

[SectionKit]

@Lohamp .

Dwell ties image size to the grid ratio, not a fixed pixel size. Resizing the image through code can mess up the layout. Instead, go to Customize Online Store Themes in the product settings to find an option for media size or image ratio. Some Dwell versions may have this under the product section.

If that option is not available, adjust the column split between the image and product details, like 60 over 40, instead of just shrinking the image. This keeps the layout balanced. For collection images, check the separate settings in the collection section.