How can I fix a hero slideshow that is not optimized for all screen sizes?

Store Design
, , , , , , , , ,

Topic summary

A user is experiencing issues with a hero image slideshow that gets cut off and doesn’t display properly across different screen sizes.

Problem Details:

  • The hero image appears cropped or improperly sized on various devices
  • Screenshots show the layout breaking on certain viewport widths

Proposed Solution:

  • Add custom CSS media query targeting screens with max-width of 1180px
  • Set hero slide height to 148vh for better responsive behavior
  • CSS should be added at the bottom of the theme’s base CSS file (Online Store > Themes > Edit code > Assets)

Current Status:

  • One solution has been suggested but implementation/results not yet confirmed
  • The fix involves theme customization through CSS adjustments
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

hero image gets cut and is not optimized for other screen sizes. how to resolve this?

Screenshot 2023-03-21 at 6.42.31 PM.png
Screenshot 2023-03-21 at 6.42.31 PM.png3834×1702 720 KB

xammyja_0-1679395360986.png
xammyja_0-1679395360986.png1284×2778 689 KB

URL: https://karimadonfashion.myshopify.com/

PASSWORD: niajuy

2

@xammyja

@media only screen and (max-width: 1180px) {
#shopify-section-template--18308040851745__facdc3ef-699f-4ea6-9f55-480ae4b6d94f .hero-slide {
    height: 148vh;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid