Dawn Theme - Image Sizing Mobile vs Desktop

[User1300]

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

[zaczee]

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

[User1300]

Makes sense! How would I go about doing that? 

[PageFly-Richard · Accepted solution]

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;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[User1300]

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

[PageFly-Richard]

Hi @User1300 ,

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

Best regards,

Richard | PageFly

[User1300]

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. 

[PageFly-Richard]

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,