-
Notifications
You must be signed in to change notification settings - Fork 219
Improve 'hero product 3 split' pattern #11414
Conversation
The release ZIP for this PR is accessible via:
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
Size Change: 0 B Total Size: 1.53 MB ℹ️ View Unchanged
|
Given the restrictions we have on development for mobile view, we need to evaluate what's possible and what isn't possible here (and perhaps update the designs to account for a better layout). Tagging @verofasulo for her opinion here. |
@nefeline @gigitux I'm not sure about what screenshot we're referring to. |
We are referring to this screenshot: The admin menubar is a bug of the tool screenshot. Please, check the text on the left column: it is not aligned with the image. |
I was thinking specifically about this pattern when I said this in this thread: [...] one of them is for sure the fact that some of them have not been designed with a clear idea of the many constraints that we have in the editor. This ends up in very weird layouts as soon as we resize the screen. In an ideal world, I think the best option would be to review them, simplify the design as the first step, and carefully implement spacing and text styles [...] The design is too complicated 🥲 Do you think something like this might help? I removed the first column and moved the title and the Specs: |
Closing this issue in favor of #11495 |
What
Fixes #11398.
This PR improves:
Why
For fixing the mobile view (put the text on top and after the image), it has been necessary not to use the Media & Text block.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Hero Product 3 split
pattern.Warning
I noticed that in the "tablet view" the current pattern doesn't look great. Should we address this in the current iteration? The screenshot below was taken with the Pixel 5 viewport in horizontal mode.
Screenshots or screencast
Mockup
Implementation
WooCommerce Visibility
Required:
Checklist
Required:
[type]
label or a[skip-changelog]
label.Conditional:
[skip-changelog]
label is not present).Changelog