Delete white space

[lvandeemter]

For our site I created 2 series of buttons, that lead you to another page in the site.
The buttons colour when hover over. They have transparent images, that needs to stay centred.
To have them centred, I created them as buttons (on the NL-page).

At first I created them as images, with links, but exeding large screens (exeding the widht of the image) lost the centred state of the image in the coloured square. See English page of the site.

The buttons work good, only there is a white space between the two Rows. As far as I can see, all the margins etc. are zero. How can I have the two rows fit together (without the (smal) white gap)? as on the English page…

Thanks for your help in advance.

2 Rows of buttons but with white space:

2 Rows of images with links - but they stay not centred on very large screens:

[thai]

Hi @lvandeemter,

It seems the height of columns isn’t consistent. To fix it, please add this element CSS to your section:

$el.x-section .x-container.marginless-columns>.x-column.x-1-3 {
  height: 300px;
  text-align: center;
}

Hope it helps

[lvandeemter]

Hi @thai - thanks for you help. This works indeed. But it feels like a fix that should not be necessary.

I do not know where that ‘gap’ is comming from. And I would like to know for future work. (I do not write CSS)
I created a new series of blocks with buttons. Put 2 eqaul sized images inside, and still there is a gap. (still a gap with all the 6 images of the same size inside the buttons)

O. I think I found a solution.
When I create a set up for the button with: Width&Height both on 100% - it looks now to be without a gap.
It.s a flex-box thing I think. Is that correct?

[thai]

Hi @lvandeemter,

I’ve replicated your buttons on my end and they’re working fine:

I don’t have to set the width & height to 100% as well. It might be conflicted CSS with the other plugins.

Please try testing a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

[lvandeemter]

Thanks for your help.
It is very strange. The English page I get right. The Dutch page still gives the gap…
I will try and de-activate plugins.

[jade]

Let us know how it goes, @lvandeemter.