Dawn Theme - Image Sizing Mobile vs Desktop

Technical Q&A

Topic summary

A user working with Shopify’s Dawn theme wants to make a mobile banner image larger and centered while keeping the desktop version unchanged.

Initial Challenge:

  • Mobile image appears too small and illegible
  • Desktop version looks acceptable as-is

Proposed Solution:
A PageFly representative provided custom CSS code to target the specific image banner:

  • Code uses @media screen and (max-width: 767px) to affect mobile only
  • Adjusts padding-bottom: 100% and object-position: left
  • Targets the specific section ID, so other image banners remain unaffected

Implementation:
Instructions to add code in: Online Store → Theme → Edit code → Assets → section-image-banner.css

Current Status:
The solution worked successfully. The user now wants to make the image even larger but lacks coding experience. The PageFly representative noted that further enlargement may be difficult since the image is already left-aligned, suggesting the user may need to contact Shopify support or find another expert for additional customization.

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

Hi @User1300 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-image-banner.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    #shopify-section-template--17945597444384__08df8423-b29e-404d-981a-c14082b25b62 .slideshow__media:before {
        padding-bottom: 100% !important;
    }
    #shopify-section-template--17945597444384__08df8423-b29e-404d-981a-c14082b25b62 .slider-mobile-gutter .slideshow__slide .slideshow__media.media > img {
        object-position: left !important;
    }
}

PageFlyRichard_0-1678290278983.png
PageFlyRichard_0-1678290278983.png344×890 54.3 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like