Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

ChavdaNayan
Copy link

@ChavdaNayan ChavdaNayan commented Jul 25, 2025

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

Image

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

Image

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

Image

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

Image

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
Copy link
Collaborator

@magento create issue

@engcom-Hotel
Copy link
Collaborator

@magento run all tests

Copy link
Collaborator

@engcom-Hotel engcom-Hotel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator

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

@ChavdaNayan
Copy link
Author

@magento run all tests

@ChavdaNayan
Copy link
Author

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.

Copy link
Collaborator

@engcom-Hotel engcom-Hotel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @ChavdaNayan,

Thanks for making the changes!

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

Thanks

@@ -2,8 +2,8 @@
/* jscs:disable */
define(["Magento_PageBuilder/js/utils/object"], function (_object) {
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
* Copyright 2025 Adobe
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Suggested change
* Copyright 2025 Adobe
* Copyright 2018 Adobe

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@engcom-Hotel
Copy link
Collaborator

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

@engcom-Hotel
Copy link
Collaborator

@magento run all tests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Changes Requested
Development

Successfully merging this pull request may close these issues.

[Issue] Fixed Banner element overlay issue on mobile when min-height is customized
2 participants