Archived topic
Mobile Spacing Issue with Centered Buttons in a 3 Column Layout
9 replies · Started by Christina on August 11, 2021
Hi guys, I'm new to creating Elements and I'm trying to create an element that showcases the best content relevant to a particular category.
I'm running into some spacing issues though with regards to a 3 column set up filled with buttons. I'm talking about the Star Wars quotes section seen here (starting underneath the "Click to read our top 100 Star Wars quotes) button): https://geektrippers.com/category/star-wars/
Especially on mobile, it seems like the buttons in the 3 columns are shifted to the right for some reason, and not centered as I would like. I've spent AGES trying to figure out the issue but nothing seems to fix it. Could you take a look and let me know if I'm missing something obvious? Thanks so much!
Hi Christina,
You are using the buttons block from WP core currently.
Can you try using the buttons block from GB first?
https://docs.generateblocks.com/article/buttons-overview/
Then maybe this option would work for you:
https://docs.generateblocks.com/article/buttons-overview/#fill-horizontal-space
Hi Leo, thanks for the reply! I swapped over to the GB buttons but they're still *slightly* off center... only really noticeable on Mobile view.
I'm still seeing the core blocks and not GB blocks:
https://www.screencast.com/t/cTDLkoMi5hL
I'm guessing it's a caching issue so please clear and disable your caching plugin while we are trying to help.
If you use the buttons block from GB then you shouldn't need to use the columns block.
Hi Leo, so I've cleared the cache now but I'm still seeing the slight off-centeredness in the buttons, even without columns. Also, if using GB without columns, is there a way to specify how many buttons will appear per row? At the moment they're all clustered together on Desktop and I'd like to specify how many go in each row.
lso, if using GB without columns, is there a way to specify how many buttons will appear per row?
Yes, it depends on how many Buttonyou added to the Buttonsblock. Currently, you put all the Buttonin one Buttons block.
Try separate the buttons into different Buttonsblock.
Let me know :)
Hi Ying, thanks SO much! Okay it looks much better now. The final problem that remains is still that the buttons are off-center in mobile view, but only slightly. I'm not sure what's causing this. Would you be able to take a look?
Can you try to remove the left and right margin for the button on mobile?
Let me know how it works :)
Hi Ying, removing just the left margin weirdly did the trick. Thank you so much for your help!!
You are welcome :)
