[Alexander Harmsen Communication GmbHParticipant]

Dear Support Team,

I am trying to fill two columns full-width, each with one block grid (containing 2 to 4 items in a row).
The achieved result is a row of buttons, without any gaps between them. Unfortunately the block grid always creates extra space to its right, instead of filling the whole column. No margins and paddings set. Any idea how to solve this?

The individual block grid items stick together nicely, but I thought it might be helpful to provide the code I use:
href="http://www.harmsencommunication.com/" shape="square" size="regular" float="none" block="true" info="none" style=" text-shadow:none; background-color:#cbe8d5; border-color:#cbe8d5"]What?[/x_button]

Looking forward to finding a solution 🙂

[RupokMember]

Hi there,

Thanks for writing in! Would you provide the exact URL where you are using this? Also provide a screenshot of what you are trying to accomplish.

Cheers!

[Alexander Harmsen Communication GmbHParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

To make blockgrid fill the entire column, you can add this under Custom > CSS in the Customizer.

.x-block-grid.four-up>li {
    width: 25%;
}

Hope that helps

[Alexander Harmsen Communication GmbHParticipant]

Many thanks! That worked all fine and the button bar is just as I wanted now.

Unless when opening the page with firefox 🙁 In this case, a black vertical line shows up, centered between the 2 columns/block grids. It is not visible in chrome or edge. Any idea why this happens and how to get the look right in firefox?

[ChristianModerator]

Hey Alex,

Please try adding a width of 101% to your last button in the first column (add width: 101%; to the button’s style field). See attachment.

Thanks.

[Alexander Harmsen Communication GmbHParticipant]

Yay! That’s it! Thank you so much 🙂

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts