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
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
It is always a good idea to also attach a screenshot showing your issue.
Thanks