How can I resize an image for mobile view on Dawn 2.0 theme?

Store Design
, ,

Topic summary

A user encountered an image display issue on their Dawn 2.0 theme homepage where an image appears larger than the screen on mobile devices while displaying correctly on desktop.

Problem Details:

  • Image extends beyond mobile screen boundaries
  • Desktop view works properly
  • User seeks mobile-only CSS solution

Solution Provided:
Multiple responders offered CSS code targeting the image banner section:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate section-image-banner.css file
  3. Add media query code at the bottom targeting screens under 749px width
  4. Apply object-fit: contain and adjust min-height properties for .banner__media elements

Outcome:
The initial solution caused a secondary display issue, but an adjusted CSS code with position: static and display: none properties successfully resolved the problem. The user confirmed the fix worked correctly.

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

Hi.

I have an image on my homepage which is displaying larger than the screen size (as pictured). It fits perfectly in desktop so only want to change the size on mobile. How can I do this please?

Ryanxanthopoulo_0-1677120727455.png
Ryanxanthopoulo_0-1677120727455.png1284×2778 347 KB

using dawn 2.0 theme. Site URL https://93d862.myshopify.com password stecew

Thanks in advance

2

Hi [email removed]Ryanxanthopoulo,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-image-banner.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 19.5rem !important;
}
.banner__media.media img{
object-fit: contain !important;
}
}

PageFlyVictor_0-1677122602576.png
PageFlyVictor_0-1677122602576.png318×568 94.3 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

Hello @Ryanxanthopoulo ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677122699275.png
GemPages_0-1677122699275.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677122714771.png
GemPages_1-1677122714771.png1611×908 74.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Hi. This has worked, however now I can see this

Ryanxanthopoulo_0-1677125129935.png
Ryanxanthopoulo_0-1677125129935.png1284×2778 478 KB

5

You can try using another code

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    display:none !important
}
.banner__media.media img,.banner__media.media{
position:static !important
}

}
6

Thankyou this has fixed this!

7

You are welcome. I’m glad when I can help you :heart_eyes: