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
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
Makes sense! How would I go about doing that?
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
Will this affect all image banners? Is there a way I can make it specifically for this image only?
Hi @User1300 ,
My above code only works for that image. Does not affect other images.
Best regards,
Richard | PageFly
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.
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,
