Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[bug]: Page Builder column responsive styles break with CMS block in page #4044

Open
1 of 9 tasks
justinconabree opened this issue Feb 23, 2023 · 6 comments · May be fixed by #4045
Open
1 of 9 tasks

[bug]: Page Builder column responsive styles break with CMS block in page #4044

justinconabree opened this issue Feb 23, 2023 · 6 comments · May be fixed by #4045
Assignees
@justinconabree @Tarun50745
Labels
bug Something isn't working Issue: Needs Update Additional information is require, waiting for response Progress: ready for grooming

Comments

@justinconabree
Copy link
Contributor

justinconabree commented Feb 23, 2023 •
edited

Describe the bug

When a CMS page has columns with responsive styles, and also has a CMS block with colums, the responsive styles for the page are no longer treated. This is because the CMS Block has it's own styles which override the media styles for the page.

To reproduce

Steps to reproduce the behavior:

CMS Block setup

  1. Create a CMS Block
  2. Add columns to CMS block
  3. Add basic image to the columns of CMS block

Page Setup

  1. Create CMS page
  2. Add Row + Columns to page
  3. Set the min-height for desktop on the columns
  4. Set an image for desktop on the columns
  5. Set the min-height for mobile to something different on the columns
  6. Set a different image for mobile on columns
  7. Add a row to the page
  8. Add CMS block into row

Expected behavior

Desktop and mobile styling/images should differ on the page's columns

Actual behavior

Images and min-height stays the same across all media

Possible solutions

PR incoming. Media styles override with the last style tag.

Note: Also requires #4028 otherwise columns don't work

Please let us know what packages this bug is in regards to:

  • venia-concept
  • venia-ui
  • pwa-buildpack
  • peregrine
  • pwa-devdocs
  • upward-js
  • upward-spec
  • create-pwa
  • pagebuilder
@justinconabree justinconabree added the bug Something isn't working label Feb 23, 2023
@m2-assistant
Copy link

m2-assistant bot commented Feb 23, 2023

Hi @justinconabree. 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.

@justinconabree
Copy link
Contributor Author

@magento I am working on this

@justinconabree justinconabree linked a pull request Feb 23, 2023 that will close this issue
Open
@Tarun50745
Copy link
Contributor

Hi @justinconabree ,

As per retesting the issue we are not able to reproduce it and working fine.

Followed steps to reproduce :

  1. Create CMS page i.e.- Test-page
  2. Added Row + Columns to page
  3. Added the min-height (i.e.-600px ) for desktop on the columns.
  4. Added an image for desktop on the columns
  5. Added min-height for mobile (i.e.-200px ) for the columns
  6. Added different image for mobile on columns
  7. Added a row to the page
  8. Added CMS block into row
  9. Added columns to CMS block
  10. Added basic image to the columns of CMS block

For recording follow the link :
https://adobe-my.sharepoint.com/:v:/r/personal/glo50745_adobe_com/Documents/Screen%20Recording%202023-05-11%20at%2010.49.58%20AM.mov?csf=1&web=1&e=dBsCP8

@Tarun50745 Tarun50745 added the Issue: Needs Update Additional information is require, waiting for response label May 11, 2023
@glo82145 glo82145 added Issue: Confirm Issue: Needs Update Additional information is require, waiting for response and removed Issue: Needs Update Additional information is require, waiting for response Issue: Confirm labels Jun 1, 2023
@glo82145
Copy link
Collaborator

glo82145 commented Jun 6, 2023

We waited for more than 14 days for update on this issue, hence we are closing it.

Please feel free to reopen if you are still have any update on the same.

@glo82145 glo82145 closed this as completed Jun 6, 2023
@glo82145 glo82145 reopened this May 9, 2024
@glo82145
Copy link
Collaborator

glo82145 commented May 9, 2024

@adobe export issue to JIRA project PWA as Story

@github-jira-sync-bot
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@justinconabree justinconabree

@Tarun50745 Tarun50745

Labels
bug Something isn't working Issue: Needs Update Additional information is require, waiting for response Progress: ready for grooming
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixing issue with Page Builder responsive styles and CMS Blocks justinconabree/pwa-studio
4 participants
@justinconabree @github-jira-sync-bot @glo82145 @Tarun50745