A user is experiencing an issue where banner images crop incorrectly when viewed on mobile devices, while displaying properly on desktop.
Proposed Solutions:
CSS modification approach: One responder suggests adding CSS code to theme.css that sets a fixed height (240px) for slideshow images on screens under 800px width using a media query.
Separate image approach: Another contributor recommends creating distinct image versions optimized for mobile and desktop views as a more robust solution.
Current Status:
The original poster questions whether the CSS solution is the only option and reports difficulty locating the theme.css file in their Shopify theme editor (screenshot provided showing available files).
The discussion remains unresolved as the user seeks clarification on implementation methods and file locations within their Shopify store’s theme structure.
Hello @kakajdiaz
Go to online store ---------> themes --------------> actions ------> edit code------->Theme.css
add this code at the end of the file.
@media only screen and (max-width: 800px) {
#shopify-section-slideshow img, .index-slideshow-section img {
height: 240px;
}
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
