Issue: On mobile, the banner image with centered text wasn’t fitting properly to the screen.
Context: After sharing the store link, the solution was implemented via theme settings (Online store > Themes > Customize > Slideshow > Custom CSS). Screenshots were provided to show the display problem.
Initial fix (did not work): A mobile-only CSS snippet set the slideshow media height to fit-content and image object-fit to contain, while hiding the text overlay. Result: images disappeared on mobile and in preview.
Final fix (worked): Updated CSS for screens ≤767px:
Explanation: The explicit height (22rem) ensures the image area remains visible; object-fit: contain keeps the whole image within the container; the text overlay is hidden on mobile.
Outcome: User confirmed the revised CSS fixed the issue. Status: Resolved.
Go to your Online store > Themes > Customize > select Slideshow section and then add those code in Custom CSS of that section
@media (max-width: 767px){
.slideshow__media { height: fit-content !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}
