Issue with BeBuilder (Flexbox): 'Image' element not stretching to 100% height in Equal Height Wrap
Hello Muffin Group Support Team,
I am building a website using the latest version of BeTheme and BeBuilder, and I am struggling with a classic 50/50 layout (Text in the left Wrap, Image in the right Wrap).
My goal is for the physical Image element to stretch and fill 100% of the height of its Wrap, dynamically matching the height of the text column next to it. Please note: I cannot use a Background Image for the Wrap because I strictly need the physical <img> tag with an alt attribute for SEO purposes.
I have configured the Flexbox layout exactly as shown in your tutorials:
- Section settings: 'Section content position' is set to Stretch (the 4th icon).
- Right Wrap settings (containing the image): 'Elements vertical align' is set to Stretch (the 1st icon).
- Image element settings: Go to Style tab -> Height is set to Custom (100%) -> Style is set to Fill -> Image position is Center.
The Issue: The Flexbox layout works partially: the right Wrap successfully inherits the height of the text Wrap (I can see the bounding box stretches to the bottom). However, the Image element inside it refuses to stretch to 100% height. It seems the internal wrappers (like .image_wrapper or .image_frame) are blocking the image from inheriting the full height of the Wrap.
I have even tried forcing it with Custom CSS (height: 100% !important; object-fit: cover !important; on custom classes), but the image still won't fill the empty space at the bottom of the column.
Could you please explain how to natively force the Image element to fully stretch and fill the Flexbox Wrap in the current version of BeBuilder? Or provide a working, targeted CSS snippet that overcomes the internal div structure for this specific use case?
Thank you in advance for your help.
Best regards, Adrian Tyszka
While waiting for a response from one of our team members, we recommend to check Support Center where it is highly likely that you will find the answer to your question in no time.
FAQ | Video Tutorials | How to