Dawn Theme: Multi-Row Image cut-off in Mobile View

Store Design
, , , ,

Topic summary

A user is experiencing an issue with the Dawn theme where images in Multi-Row sections are being vertically cropped on mobile devices. This is problematic because the images are book covers that need to display in their entirety.

Problem Details:

  • Affects two Multi-Row sections
  • Images crop vertically on mobile view only
  • Previous solutions from similar posts haven’t worked
  • Screenshot provided showing the cropping issue

Proposed Solutions:

Multiple community members offered CSS-based fixes:

  1. Custom CSS for the section:

    img { object-fit: container; }

  2. Theme-wide Custom CSS (more specific):

    .multirow__inner.page-width .image-with-text__media img {
    object-fit: contain !important;
}

    Applied via: Shopify > Online Store > Themes > Customize > Settings > Custom CSS

Status: The discussion remains open with no confirmation yet on whether the proposed solutions resolved the issue. Several responders also requested the store URL for further troubleshooting.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I’ve search and tried code on a several similar posts on Dawn theme, but none have worked.

I have two sections on Multi-Row in Dawn Theme, but in Mobile the image is cropped vertically. I need the image to show 100% as it is a book cover.

harkermcnair_0-1736831970669.png
harkermcnair_0-1736831970669.png509×770 153 KB

1 Like
2

Hello @harkermcnair
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Hi @harkermcnair
How are you?

Can you please share store Url?

4

Hello, @harkermcnair
Please share “Store URL”
Thanks!

5

Hi @harkermcnair

You can try to add this code to Custom CSS of that section to check if it solves the issue

img { object-fit: container; }
6

Hi @harkermcnair

You can follow the instruction here :

  1. Go to Shopify > Online store > theme > customize

  2. Click to Settings > Custom CSS > Paste this code to the section and save.https://prnt.sc/Rl66N9K_Bjvs

.multirow__inner.page-width .image-with-text__media img {
    object-fit: contain !important;
}

I hope it helps.

Esther