Archived topic

Blocks border and allignment

3 replies · Started by Korhan on June 16, 2021

Viewing posts 1–4 of 4

June 16, 2021 at 9:34 pm #1824875

Hi, I am trying to add a border to a block and so far it didn't work well.

I just want to keep the content inside the border and also align the content central inside the border. There is also a button in the block but somehow it only shows when I hove over the button.

1- How can I keep the content inside the border
2- How can I locate the content in the middle of the border?
3- How can I make the button visible?

Thank you.

June 16, 2021 at 9:54 pm #1824877

Hi Korhan,

It's not visible because the color blends in with the background. The text color is white which is the same as its background so there's basically no contrast.

I suggest adding background-color to the button.

I've inspected the site and I noticed the button has this CSS:

.is-style-outline>.wp-block-button__link:not(.has-background), .wp-block-button__link.is-style-outline:not(.has-background) {
    background-color: transparent;
}

I can't be sure if this is coming from a plugin or a custom CSS because it's hidden behind cache. Can you try disabling the caching plugin so we can trace it properly?

June 16, 2021 at 10:46 pm #1824898

Thank you, I have deactivated the caching plugin.

Can you also help with keeping the content inside the border please?

June 16, 2021 at 11:51 pm #1824944

thanks.

The overflow is because of this CSS -

.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
    margin-left: -20px;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
}

It's when you set the wp column block to alignfull.

Can you try removing the alignfull setting?

Or consider using GenerateBlocks' Grid Block for this. :)

This archived topic is closed to new replies.

Start building better websites today.