I have a Dawn shopify theme with a slideshow as a banner. On the Desktop version, it works fine, but on the mobile, the width of the image is cropped. How could I have the slideshow’s aspect ration adjusted to accommodate for this change on mobile?
Topic summary
A user encountered an issue where their Dawn theme slideshow banner displayed correctly on desktop but had cropped images on mobile devices. They sought a CSS solution to adjust the aspect ratio for mobile viewing.
Solution provided:
- Navigate to Online Store → Theme → Customize
- Select the Slideshow section on the homepage
- Add custom CSS code to the custom CSS box
CSS code snippet:
The solution uses a media query targeting screens with max-width of 749px, applying object-fit: contain and position: relative to .banner__media img, plus height: 100% to .slideshow__media elements.
Outcome:
The original poster confirmed the solution worked effectively, resolving the mobile display issue. The fix ensures images display properly without cropping on mobile devices while maintaining the desktop appearance.
can i try this theme on my store?
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Customize.
Step 2: Find the section on the homepage, click the Slideshow
step3: Add the following code to the custom CSS box.
@media screen and (max-width: 749px) {
.banner__media {
height: 100% !important;
}
.media img {
position: relative !important;
object-fit: contain;
}
}
The image will be displayed normally on the mobile end.
That worked great.
Okay, great!
thanks for great guide