Archived topic
Allignment of items in a box
9 replies · Started by Jos on May 18, 2022
Hi,
I want to allign items in a box in a way that the top item allign to the top of the box. And the last item to the bottom of the box.
This with different volumes of text and items. Now they only allign at the top. Box with less text puts the Tell me more Link higher.
I cannot show the screenshot I made because
Thanks in advance,
Jos
Hi Jos,
Try this solution introduced in this article:
https://generatetips.com/generateblocks/how-to-align-content-inside-columnsgrid/
If it doesn't work, can you link us to the site where we can see the containers?
Hi Ying,
The solution worked with one section. On the Bottom of the page I named a container the same. But there it does nog work.
Would you take a look here too. It is on the homepage.
Thanks for your fast reaction!
The solution worked with one section. But the icons in the top of the boxes are squeezed in now. They aught to be round.
On the Bottom of the page I named a container the same. It's a reference to the blog articles. But there it does not work. A class should be useable more times on a page I read. Do I need to adjes the code for this container block?
Would you take a look here too. It is also on the homepage.
regards, Jos
Hi there,
the first column has 25px of bottom padding which is affecting the alignment:
I will check that. Thanks! Do you know why the icons in the boxes above are squeezed? If I delete the CSS the headline icons are round again.
I mean the boxes about halfway the page. Where the mentioned CSS was given.
Regards, thanks for the great help.
Jos
Hi David,
Oops overlooked that!Sorry.
Would you be so kind to check the third block on the page.
Do you know why the icons in the boxes above are squeezed? If I delete the CSS the headline icons are round again.
I mean the boxes about halfway the page. Where the mentioned CSS was given.
Regards, thanks again for the great help!
Jos
Hi Jos,
Try add this CSS:
.trust-kaders> .gb-grid-column > .gb-container > .gb-inside-container >* {
width: 100%;
}
That worked!
Thanks, Ying
You are welcome :)