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.
1

Using the Dawn Theme, I’m trying to get the mobile image to be centered and larger so that it is legible. I like the look of the desktop version but would like the mobile to be bigger and centered on the screen. Any suggestions?

https://shopshut-3517.myshopify.com/?_ab=0&_fd=0&_sc=1

Password: mojo

Screenshot 2023-03-07 131050.png
Screenshot 2023-03-07 131050.png672×275 62.2 KB

2

Hi @User1300 ,

We need to create separate image upload options for mobile and desktop. To create this we need to customize the slider.liquid code

3

Makes sense! How would I go about doing that?

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
5

Will this affect all image banners? Is there a way I can make it specifically for this image only?

1 Like
6

Hi @User1300 ,

My above code only works for that image. Does not affect other images.

Best regards,

Richard | PageFly

7

Worked perfectly! If I wanted to make it even larger what part of the code would I scale up?

Change max-width 767px or increase padding bottom to 120%? Pardon my ignorance I have no coding experience.

1 Like
8

Hi @User1300 ,

This part is quite difficult, because your current image is already on the left. If you adjust the center and larger, then you need to make a margin. So I think you may try contacting Shopify support or finding another expert regarding this issue.
Best regards,

1 Like