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

[justinconabree]

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 https://github.com/magento/pwa-studio/pull/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
• [x] pagebuilder

[m2-assistant[bot]]

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]

@magento I am working on this

[Tarun50745]

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

[glo82145]

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]

@adobe export issue to JIRA project PWA as Story

[github-jira-sync-bot]

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

[glo82145]

As we have not received any update on this issue, hence we are closing it. Please feel free to reopen in case of any update.