Home Page on Mobile – 2 Buttons per Row

[Shelley]

Hi. I’d like to display 2 buttons per row (instead of the 1 that’s currently showing) on the mobile homepage of my site. I think this can be done via css, but its over my skill level.

Can someone help?

Thanks 🙂

[Leo]

Hi there,

Currently you are adding 4 containers per 1 grid wrapper, try adding all 8 containers under 1 grid wrapper instead.

See this section for more info:
https://docs.generateblocks.com/article/grid-overview/#adding-more-grid-items

Then if you use the option to control the mobile width:
https://www.screencast.com/t/wU91As6WVPwE

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shelley]

Awesome solution! Thank you!

I love this grid feature. Its working great except for the last two seem to be bugging out. I checked to make sure all 8 containers had the exact same settings for mobile – 50%.

In order to keep my desktop layout the same, I changed those to 25% so 4 would appear in each row like before. The second row has an indent causing the images in the two rows to not be vertically aligned. Not sure why – I verified they were all formatted similarly.

Any ideas on those two formatting issues?

[Shelley]

So I just came home and logged into wordpress to work on the page more, and it looks like its corrupted. The block editor can’t read it.

Hoping I don’t have to rebuild the whole thing.

[Leo]

Any chance you can disable LiteSpeed Cache for now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shelley]

Its deactivated.

[Leo]

Can you make sure the last button is set to 25%?

I believe that’s what’s missing:
https://www.screencast.com/t/dNKKWYv79s

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shelley]

I could, but unfortunately the page is corrupted and I’m unable to edit it.
I’m afraid I’ll have to rebuild it from scratch. I’ll post back here if I have any issues.

[Leo]

Not sure what would’ve caused that.

Maybe try fixing the issue first before you rebuild everything?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shelley]

Too late! I dropped from 8 buttons to 4 and everything looks great.

One last issue – how can I remove the bullet point buttons from the Latest Posts block?

[Leo]

Glad to hear 🙂

Can you open a new topic for the separate question?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts