mikeicode
commented
2 years ago but results in the following mobile experience
How about disabling "Stack on mobile" on the Columns block?
Without WC the right column would end up being empty (mini cart not available), and the header would be unbalanced Would this be a blocker for converting to a columns block?
IMO this is better than the current layout with the uncentered menu. It'd be easy enough for the user to add some text to the right column, or Social icons like the Munchies theme has by default.
I'm also interested to hear your thought about what tools we are missing in Gutenberg to make a layout like this possible.
My first thought was that if we used CSS Grid instead of Flexbox it'd be easier to create this layout, however I think that would actually run into the same issue when the right column in the layout is removed.
We are missing mobile alignment adjustments, which you could use if you did want to have the items stacked on mobile. You could center the site title on mobile, etc.
alaczek
Quick summary
Thriving Artist uses three column layout in the header. Originally a row block was used for this, but this creates an issue where the middle column will not be centered if the other two columns aren't equal in width (and there's no way to set an item width inside the row block). This issue is to discuss alternative solutions.
The issue:
One idea is to replace the row block with a columns block, with a set width for each column. This solves the original issue on the desktop but results in the following mobile experience:
There's also another issue - Thriving Artist can be used with or without WooCommerce. Without WC the right column would end up being empty (mini cart not available), and the header would be unbalanced (this does not happen when a Row block is being used for layout because the right-most item will collapse if empty, with the menu being pushed to the right.
I'd be interested to hear from @mikeicode about how serious you think this is. Would this be a blocker for converting to a columns block? I'm also interested to hear your thought about what tools we are missing in Gutenberg to make a layout like this possible. Also cc @iamtakashi for ideas.
Steps to reproduce
a
What you expected to happen
a
What actually happened
a
Browser
No response
Context
No response
Platform (Simple, Atomic, or both?)
No response
Other notes
No response
Reproducibility
Consistent
Severity
No response
Available workarounds?
No response
Workaround details
No response