[Resolved] Horizontally centered grid

[Author]

Posts

[andreasP-4]

I created a grid on a template. The grid will usually have 4 buttons, but sometimes it will have less. What I want is the grid to be horizontally centered to the rest of the template no matter how many buttons there are. Can this be done somehow?
Thanks!

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Welcome to Toolset support and I'd be happy to assist.

To show a grid of buttons, that is always centered ( regardless of number ), you can follow these steps:

1. In your "View Loop" block's settings, select the "Unformatted" loop style.
( screenshot: hidden link )

2. Next, in the view's "Custom CSS" field, include some CSS code to show the loop items, centered and 4-in-each-row:
( screenshot: hidden link )

.js-wpv-loop-wrapper {
text-align: center;
}

.js-wpv-loop-wrapper .wpv-block-loop-item {
display: inline-block;
width: 24%;
overflow: hidden;
}

3. The last step would be to select center alignment in the "Button" block's settings.
( screenshot: hidden link )

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[andreasP-4]

Waqar, thank you very much for the detailed reply!

Unfortunately this doesn't give the result I want to have. Let me explain:

What I want to have is 1 to 4 buttons next to each other, like the coloured ones in this screenshot (hidden link). The result I got following your help is the grey ones at the top.

In this screenshot (hidden link) I have disabled one of the buttons, so only three remain active. I need those three (or two or one in other cases) to stay horizontally centered no matter what.

Also, I want to remove that "No Items Found" at the bottom. I really don't know where it came from.

Thank you for your time!
Andreas

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Andreas,

Thanks for sharing the update.

I've tested the custom CSS code again on my website and it worked as expected.

It looks like there is some difference involved in how these buttons are set up on your website.

Can you please share temporary admin login details along with a link to a page where these buttons can be seen?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Andreas,

Thank you for sharing the admin access.

It is now clear that those buttons are coming from multiple custom fields of the same post. The solution I shared earlier was for a case when buttons were needed from multiple posts, through a view.

In your content template "Template for Fonts", you don't need a view so you can remove that entire block.

As for the colored buttons in a "Grid" block, you can remove the grid block and its containing buttons and instead add a "Container" block and assign it the ID "centered-buttons-container".
( example screenshot: hidden link )

Next, you can add the 4 "Button" blocks inside this container block directly.
( example screenshot: hidden link )

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

( sorry the incomplete message was sent earlier )

The last step would be to include some custom CSS code in the template to make sure that the buttons inside this particular container are always centered:

#centered-buttons-container {
text-align: center;
}

#centered-buttons-container > .tb-button {
display: inline-block;
width: 24%;
overflow: hidden;
}

regards,
Waqar

[andreasP-4]

Waqar, a million thanks!

Your detailed help actually solved my problem, I just have an additional question.
Is there an easy way to bring them all a little closer together towards the vertical center? In other words, I want to decrease the distance between them.

Again, thank you so much for your help!!
Andreas

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Andreas,

Thanks for the update and glad that my message helped.

To make the buttons closer to the vertical center, you can update the custom CSS code slightly:

#centered-buttons-container {
text-align: center;
max-width: 80%;
margin: 0px auto;
}

#centered-buttons-container > .tb-button {
display: inline-block;
width: 24%;
overflow: hidden;
margin: 0px;
}

Note: Feel free to adjust the "80%" value to increase or decrease the spacing between the buttons.

And to check the CSS code that is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar

[andreasP-4]

Waqar, huge thanks for your assistance throughout this issue! Really appreciate it.

My issue is resolved now. Thank you!