Hero banner not displaying correctly in elementor
Hi everyone
I’m having an issue with my hero banner graphic on an e-commerce site built with Elementor. The top of the image (text and top section of the graphics) keeps getting cut off on tablet/desktop viewports.
Setup details:
Widget: Image Carousel inside a Flexbox Container
Original Image Size: 1920 x 850 px
Image Resolution in Elementor: Set to "Full"
What I’ve tried so far:
Set Image Fit to both Cover and Contain in the Carousel style settings.
Turned Equal Height ON in the Content tab.
Toggled Full Width ON/OFF under Image Style.
Adjusted the outer Container Min Height (tried up to 850px+).
Despite these settings, the upper part of the graphic remains cut off/cropped inside the frame.
Has anyone run into this ratio issue before? What is the best way to force the carousel frame to display the full height of the 1920x850 image without clipping the top? Or should I be using a different widget/approach for hero banners like this?
Screenshots attached showing my settings and how it currently renders. Thanks in advance for any help!
[link] [comments]