Pique: columns(Columns Block) with wide alignment are getting cut off on mobile

[Gustavo-Hilario]

Quick summary

Column blocks with wide alignment are cut off on mobile. User should be using a sidebar.

Steps to reproduce

1. Activate the Pique theme on a test site.
2. On the Customizer, add any block to the Sidebar widget, just to make sure your site has a sidebar.
3. Create a new page.
4. Add a Column block and add some content like paragraphs and images.
5. Save, publish the page and check it out on mobile.

The content inside the Column block will show up cut off on the right and left sides.

What you expected to happen

I expected to see the full content placed within the column block on mobile.

What actually happened

Content is getting cut off on the edges.

This code seems to be causing the issue here:

Context

Customer report here:

• [ ] 5453882-zen

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Pique Theme.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

Yes, easy to implement

Workaround details

If the user can add CSS code on their site, this might help:

@media  (max-width: 999px)  {
	body.pique-sidebar.pique-singular .alignwide {
           margin-right: auto;
           margin-left: auto;
  }
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5453882-zen

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - no

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can confirm the issue happened as described. The key things to make sure you can replica is to have a sidebar and a wide alignmnent.
• Might be related to this https://github.com/Automattic/themes/issues/2059

📌 ACTIONS

• Transferred to XYZ external rep https://github.com/Automattic/themes/