Issue with BeBuilder (Flexbox): 'Image' element not stretching to 100% height in Equal Height Wrap

edited March 15 in BeBuilder

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:

  1. Section settings: 'Section content position' is set to Stretch (the 4th icon).
  2. Right Wrap settings (containing the image): 'Elements vertical align' is set to Stretch (the 1st icon).
  3. 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.

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.