Change image with text using custom css

Store Design

Topic summary

A user working with Shopify’s Dawn theme wants to resize an image in the “image with text” section using custom CSS, but encounters an issue where the image shrinks while its container box maintains the original dimensions, creating unwanted whitespace.

Proposed Solutions:

Three community members offered CSS-based approaches:

  • Solution 1: Limit the image column width using max-width on .image-with-text__media-item and set object-fit: contain on the image itself
  • Solution 2: Apply width constraints to both the image and its container class, using max-width to keep dimensions consistent
  • Solution 3: More comprehensive approach targeting .image-with-text__media-item with max-width, removing borders, and adjusting height/positioning properties with transform centering

All solutions focus on constraining the container element rather than just the image, which addresses the core problem of the oversized box. The third solution includes a visual result demonstrating the fix.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I am using the Dawn theme, and want to change the imagesize on a “image with text”, using custom css, so only that one image is affected. I have changed the imagesize, but the image box still takes up the same space as before:

shopifyhelp.png
shopifyhelp.png1535×770 87.2 KB

Is there a better way to change imagesize, so the image box gets as small as the picture?

Url: Stangtennis - Crux – Smashtennis.dk

2

Better solution would be to undo your code and use this instead:

.image-with-text__media-item {
  max-width: 250px; /* can play with this */
}
.image-with-text__media-item img {
  object-fit: contain;
}

This way you’re limiting the image column width and the image will just fit whatever space it has.

3

You can adjust the CSS as follows to both change the image size and potentially adjust the box (container) size to fit the new dimensions:

/* Target the specific image */
.your-specific-class img {
    width: 300px; /* Change this value to your desired width */
    height: auto; /* Keeps the aspect ratio */
}

/* Adjust the image container size if needed */
.your-specific-class {
    width: auto; /* or specify a specific width */
    max-width: 300px; /* Change to keep the box size consistent with image */
}
4

Hi @RasmusF ,

Please add code:

.image-with-text__media-item {
    max-width: 150px;
}
.image-with-text__media {
    border: none;
}
.image-with-text__media.media > *:not(.zoom):not(.deferred-media__poster-button) {
    height: auto;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

Result:

Screenshot.png
Screenshot.png2472×904 134 KB