Archived topic
Colums won't center as expcted
7 replies · Started by Jacob on May 3, 2020
Hi guys!
Please my example URL in the hidden thing.
Basically, the 3 elements, the photo, text in the middle, & the button, won't center in the middle of the grid/columns.
I'm also having a really hard time over ridding the CSS for the padding.
here is my CSS code so far:
.wp-block-columns {
border: 1px solid #161616;
}
If you could help, that would be amazing.
Hi there,
in 2 of your columns you have an empty Text Block - can you remove them first then we can look at what else is needed to fix the misalignment
Howdy David! I think i did as you suggested if you can take another look.
Try this:
.wp-block-column .wp-block-image, .wp-block-column p {
margin-bottom: 0;
}
.wp-block-column .wp-block-buttons .wp-block-button {
margin: 0;
}
.wp-block-column .wp-block-image figure {
display: flex;
justify-content: center;
}I would also recommend to use the Grid blocks from our GenerateBlocks plugin to create columns:
https://generateblocks.com/
It would offer you much better control than the default columns block from Gutenberg.
okay great, i'll give that a try.
By any chance, from my example, is it possible to remove that large 'black' area? I think the HTML container/class is '.page-hero' to help you know what I am talking about.
And put the h1 within the <body>/html class 'inside-article' directly above the text?
I remember reading about it in your docs and just can't remember. If its complex, don't worry about it.
Thanks again for your help.
in Dashboard > Appearance > Elements - delete the Header Element that is displayed on Pages.
thanks!
Glad we could help :)
