Button Block: Set Buttons to Full width on Mobile Devices

[deborah86]

What problem does this address?

I am frustrated because I am unable to set the buttons to full width on mobile devices.

What is your proposed solution?

The only option is to have buttons full-width on both mobile and desktop. I would like to be able to have the option to set buttons to full-width only on mobile view. This will create a better interface when buttons are stacked.

This is a the design example of how the buttons should look on mobile devices:

[skorasaurus]

I currently handle this through a custom CSS rule that I've made (and this CSS isn't even tested very well, I only have applied on one specific page...)

(e.g. I do:

 {
  min-width: 300px; 
  max-width: 25vw;
}

Would be intriguing to see this built into Gutenberg.

[kathrynwp]

Somewhat similar request here, requesting the an option to stack buttons, only on mobile:

https://wordpress.org/support/topic/buttons-stack-on-mobile/

[jasmussen]

I think #44467 should allow the full-width buttons in general. @jameskoster would it be possible to have some intrinsic responsiveness by combining those values with "Allow wrapping"? 🤔

[jameskoster]

It's hard to say. In the context of a Row block (which 44467 focusses on) it's tricky to imagine how you'd achieve a configuration that would solve this issue.

If the children had a fixed width then the container would just expand in width to accommodate them. If they had a fill width then they will expand/collapse to accommodate the available space. At no point would they switch from a row to column orientation.

Wrapping + fixed width could potentially work. For example you might set all children to 100% width, and enable wrapping to create:

 _______________
|  ___________  |
| |   Button  | |
|  ___________  |
|  ___________  |
| |   Button  | |
|  ___________  |
|  ___________  |
| |   Button  | |
|  ___________  |
 _______________

But the problem here is two-fold:

1. The same configuration would be applied to all orientations
2. This is no longer representative of a Row

Perhaps you had something else in mind?

---

It's certainly good to connect these dots, this is exactly the kind of use case we need to consider as we iterate on layout tools.

[jasmussen]

At no point would they switch from a row to column orientation.

Right, this this makes sense.

I suspect if we need intrinsic responsiveness here, we probably need to leverage some CSS grid on the container, which would allow supplying min/max widths, which would then force stacking. Something to think about!

[tellthemachines]

I suspect if we need intrinsic responsiveness here, we probably need to leverage some CSS grid on the container, which would allow supplying min/max widths, which would then force stacking. Something to think about!

Grid will definitely do a better job of keeping the buttons all the same size than flex, but in order to be intrinsic the buttons would still have to stick to the same minimum size on all breakpoints. If OP wants the buttons to be, say, 100px wide on desktop and full screen width on mobile, that won't be achievable without some kind of media query.