Fixed Banner element overlay issue on mobile when min-height is customized

[ChavdaNayan]

Preconditions (*)

Tested in this versions:
Magento 2.4.8

Description (*)

When we set a custom minimum height for the banner, the content overlay doesn’t show up on the mobile frontend.

Steps to reproduce (*)

1. Go to Content > Pages Or Blocks.
2. Edit a page or block using Page Builder.
3. Drag and drop a Banner element.
4. Add text, button and overlay color in the content area.
5. In mobile view, change the banner set a minimum height that's different from the desktop view. The issue happens only when mobile and desktop have different heights. (e.g Desktop minimum height 300px and Mobile minimum height 301px) (See Screenshot 1).
6. Save and view the page on mobile device (or emulate with browser tools).

Screenshot-1

Expected result (*)

When setting a custom minimum height value for the Banner element in Page Builder’s mobile view, the content overlay (text/button layer) should be visible (See Screenshot 2).

Screenshot-2

Actual result (*)

When setting a custom minimum height value for the Banner element in Page Builder’s mobile view, the content overlay (text/button layer) is not clearly visible (See Screenshot 3).

Screenshot-3

Additional information (*)

In the banner element on mobile viewports, when we change the custom minimum height value, the banner overlay background color becomes transparent (See Screenshot 4).

Screenshot-4

Resolved issues:

1. resolves [Issue] Fixed Banner element overlay issue on mobile when min-height is customized #901: Fixed Banner element overlay issue on mobile when min-height is customized

[engcom-Hotel]

@magento create issue

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @ChavdaNayan,

Thanks for the contribution!

The changes looks good to us, but please fix the failed static test failures. Other failures seems flaky to me.

Thanks

[engcom-Hotel]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Unit Tests

[ChavdaNayan]

@magento run all tests

[ChavdaNayan]

Hello @engcom-Hotel
I have resolved the static test issues related to this commit. The remaining test failures are unrelated to the changes introduced here.

[engcom-Hotel]

Hello @ChavdaNayan,

Thanks for making the changes!

The failed tests seems flaky to me, but please fix the copyright year below.

Thanks

[engcom-Hotel]

Copyright year should be the year when the file was created:

Suggested change

	* Copyright 2025 Adobe
	* Copyright 2018 Adobe

[ChavdaNayan]

Hello @engcom-Hotel
Changed the copyright year to reflect the file's creation year.

[engcom-Hotel]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Integration Tests

[engcom-Hotel]

@magento run all tests

[engcom-Bravo]

Hi @ChavdaNayan,

Thanks for your Contribution!!

❌ QA Failed

Preconditions:

• Install fresh Magento 2.4-develop

Before: ✖️ 

After: ✔️  

After taking PR changes also the button still not showing up in Mobile view.Could you please let us know if we are still missing anything.

Thanks.

[engcom-Hotel]

Thanks @engcom-Bravo for the QA!

As the QA is failed for this PR, hence moving it to Changes Requested bucket. @ChavdaNayan please look into this.

Thanks

[engcom-Bravo]

Hi @ChavdaNayan,

Thanks for your Contribution!!.

Did you get a chance to look into this #899 (comment) and please let us know if we are missing anything and provide latest update if possible.

Thanks.

[engcom-Bravo]

Hi @ChavdaNayan,

Thanks for your Contribution!!.

Did you get a chance to look into this #899 (comment) and please let us know if we are missing anything and provide latest update if possible.

Thanks.

[engcom-Hotel]

Hello @ChavdaNayan,

We have noticed that this PR has not been updated for a while. Therefore, we are closing it for now.

Please let us know when you are ready to work on it again, and we will be happy to reopen the PR.

Thank you for your valuable contribution!