How can I resize multi-row images in the Dawn theme?

Store Design
, , ,

Topic summary

A user seeks to resize multi-row images in Shopify’s Dawn theme, as theme customization options don’t provide adequate control.

Solution Provided:

  • Add custom CSS to base.css or theme.liquid to control image dimensions
  • Target .image-with-text__media img with max-width and max-height properties (e.g., 500px)
  • Initial placement in base.css didn’t work; moving the code to layout/theme.liquid (just before </head>) resolved the issue

Ongoing Issues:

  • One user reports visible white lines/strips appearing on sides, top, and bottom of images after applying the fix
  • CSS override conflicts from existing store styles may require adjusting the code placement or specificity
  • The discussion remains open with users requesting additional help to eliminate unwanted spacing around resized images
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi

There is a way to make the Multi Row images smaller?

I tried through my theme customization but it didn’t go well because it makes the image not full width.

How I can change the size through code?

Untitled.png
Untitled.png1725×911 348 KB

2

Hi @Ell_Soll

For that you can use this fast solution,

Follow this:

  1. Go to Online Store->Theme->Edit code
  2. Asset->base.css > paste bellow code in bottom of file
.image-with-text__media img{max-width: 500px; max-height: 500px; margin: auto; right: 0; bottom: 0;}

Note: it will work for all image with text section,

  • you can change max width and max height in css as you want small or big.

Best regard

3

Hi thanks for your reply but it’s not work.

I have multirow, not image with text.

4

have you added code? i cant see in front side?

add it and let me know will check

5

Added.

Check now.

6

Css is not loading on page

try to add in layout/theme.liquid just before
1 Like
7

Perfect!

Thank you.

8

I can see one css override by store css so remove old one and add this new
1 Like
9

This worked for me. However, the previous width of the image is visible by lines on each side. How do I get rid of this

10

This worked for me. However, the previous width of the image is visible.

11

send me store url will check

1 Like
12

deskgenix.com

13

Could you tell me how you solved problems with white stripes on the top and bottom of image?