[Resolved] Buttons in the grid just shrink, don’t stack when going from desktop to tablet

[Colby]

I know it’s probably a CSS setting that I am missing, but I am trying to create a grid of 4 buttons. On desktop, they would all be in one row straight across. As the screen width decreases to tablet and mobile, the buttons should stack appropriately when there isn’t room in the row.

The problem that I am having is that desktop and mobile look fine, the buttons stack on mobile as you would expect. But on tablet or any reduced width, the buttons themselves start to shrink down. See an image of this here: https://i.redd.it/3743kym5bgfa1.png

Is this CSS, or a setting on the buttons/grid that I need to change?

Thank you

[Ying]

Hi Colby,

Are you adding 1 Buttons block to each container of the Grid block?

If so, I would recommend do NOT using Grid block for this, you just need to add multiple button blocks within the same buttons block.

You can select a button block, and click the + icon on the floating tool bar to duplicate a button block: https://docs.generateblocks.com/article/buttons-overview/#buttons-container

Once it’s done, if there’s still an issue, can you link us to your site where we can see the buttons?

Let me know 🙂

[Colby]

That was it! I changed from using the grid to just the button blocks. Originally I was using grid because it allows you to easily space between the grids, but I just did it with margins on the buttons instead. Works great now, thank you!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts