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 minimum height setting for the banner (e.g. set to 300px) (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

[m2-assistant]

Hi @ChavdaNayan. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-November]

Hello @ChavdaNayan ,

Thank you for the detailed report and your collaboration.

We attempted to reproduce the reported issue on the 2.4-develop instance, but were unable to replicate it. For your reference, please find the attached screenshot demonstrating the expected behavior.

Steps Followed:

• Navigate to Content > Pages or Blocks.
• Edit a page or block using Page Builder.
• Drag and drop a Banner element.
• Add text, button, and overlay color in the content area.
• In mobile view, adjust the minimum height setting for the banner (e.g., set to 300px). (See Screenshot 1)
• Save and preview the page on a mobile device or using browser emulation tools.
• After following the preconditions and reproduction steps, we did not encounter any issues and let us know if we are missing anything to reproduce it.

As a result, we are marking this ticket as "Needs Update".

Thank you once again for your efforts!

[ChavdaNayan]

Hi @engcom-November ,
Thanks for checking this issue.
I made a small mistake in my steps. In mobile view, set a minimum height that's different from the desktop view. The issue happens only when mobile and desktop have different heights. Please check the video below.
https://www.awesomescreenshot.com/video/42428144?key=3fade1d69fb1f14ee278e5ef07187088

[engcom-November]

Hello @ChavdaNayan ,

Thank you for your confirmation.

We have attempted to reproduce the reported issue on the 2.4-develop instance, and we were able to successfully replicate it. Please find the attached screenshot for reference.

Steps to Reproduce:

• Navigate to Content > Pages or Blocks.
• Edit a page or block using Page Builder.
• Drag and drop a Banner element.
• Add text, button, and overlay color in the content area.
• Switch to mobile view and modify the minimum height setting for the banner (e.g., set to 300px). (Refer to Screenshot 1)
• Save and preview the page on a mobile device or using browser emulation tools.

Based on our findings, we are marking this issue as: Issue: Confirmed

Thank you!

[engcom-November]

@adobe export issue to Jira project PB

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.adobe.com/browse/PB-1610 is successfully created for this GitHub issue.