Stackable
Stackable copied to clipboard
[Blocksy] When buttons stack, there is a space on the right, this makes them not to be centered
Describe the bug Reported by Blocksy. When there are two buttons and I changed view to mobile and tablet view, the first button is not aligned with the second one because of the additional space in padding.
To Reproduce Steps to reproduce the behavior:
- Add new page
- Add a Feature block
- In the button portion, add another button
- Publish page and view it
- Open console and toggle device toolbar and set dimensions to mobile or tablet view
- Check if the two buttons are not aligned
Other observations: If button group has Collapse Buttons on "Mobile" or "Tablet" it aligns. But if it's set to "Don't collapse", the buttons are not aligned.
Expected behavior When buttons stack in mobile or tablet view, it should be aligned to center.
Screenshots If Style > General > Collapse Buttons on is set to "Don't collapse", buttons align to center in Desktop view only. Mobile and Tablet view is not aligned to center.
https://user-images.githubusercontent.com/103395655/164181457-21f1db5d-4df5-4abe-b31d-61cb82473752.mp4
If Style > General > Collapse Buttons on is set to "Desktop" or "Tablet", buttons align to center in all views. - CORRECT
https://user-images.githubusercontent.com/103395655/164182837-2ceba2ac-af7e-43e5-be07-8b4991054c43.mp4
If Style > General > Collapse Buttons on is set to "Mobile", buttons align to center in Desktop and Mobile view only. Tablet view is not aligned to center.
https://user-images.githubusercontent.com/103395655/164182568-a7682097-f589-4b45-94a3-b932a0abe222.mp4
Problem is caused by the default margins to separate the buttons in the editor.
@bfintal Moved this to Backlog. See comment: https://github.com/gambitph/Stackable/pull/2390#issuecomment-1219123902