Morning everyone - I am running into an issue when adding a slideshow on our homepage (using dawn theme) It is huge on the desktop view .. so much so that when you go to the homepage, it is all you can see. We want a slideshow there, but want users to still be able to see the shop by category section under it as well. See this website for a good example of what we’re going for www.carewell.com The other issue is the slideshow is not fitting on mobile view at all. I contacted shopify support, they advised me to create the banner in 1200x475 pixels, which I did and changed the setting to adapt to first image. Still no luck. Can anyone recommend what custom CSS code I should drop into this section to accomplish what we want for desktop and mobile view? See images below for the current fit issue on both. Thanks for replies!
Topic summary
Users are experiencing sizing issues with the Dawn theme’s slideshow feature on both desktop and mobile views.
Desktop Problem:
- Slideshow displays too large, occupying the entire viewport and hiding content below (like “shop by category” sections)
- Users want a layout similar to carewell.com where the slideshow is visible but doesn’t dominate the page
Mobile Problem:
- Slideshow doesn’t fit properly on mobile screens
- One user resolved this by adding custom CSS to the slideshow section:
@media screen and (max-width: 749px){
.banner__media.media>img {object-fit: fill !important;}
.banner__box {padding: 0px !important;}
}
- This code should be added via: Slideshow → Custom CSS section
Current Status:
- Mobile view issue appears solved for some users
- Desktop sizing problem remains unresolved
- Shopify support suggested creating banners at 1200x475 pixels and adjusting image adaptation settings, but this didn’t fix the desktop issue
The discussion is ongoing as participants seek a solution for the desktop display problem.
update .. I seem to have figured out the mobile view issue. Added this to the section and it fixed that.
@media screen and (max-width: 749px){ .banner__media.media>img {object-fit: fill !important;} .banner__box {padding: 0px !important;} }
Still need a solution to fix desktop slideshow being so large and taking up the whole page … any ideas?
Where did you put this code to have a mobile view?
Same here…it worked for me as well but desktop view is still problematic!!!
click on slidshow-> then scroll down and click on custom css. Add this code there and save. But it fixes mobile view only not desktop view. If u have fixed both Kindly guide me as well. Thanks