[Resolved] Tricky GB Container

[Carsten]

Hi there, I find working with the container very tricky, I’m trying to add a Heading into the Container, with a background image as background, full width. I have been dragging the arrows, using different keys and have added the Heading block directly in the Container, but every time I end up with this:
It is also very tricky to target the container from the heading, so better tools would be appreciated.

https://imgur.com/undefined

What am I doing wrong here?

One thing more, it would be really nice if a reusable Container block was editable, so the template could be used on different pages but with eg. changeable Heading and background image, so the structure, like padding and margin was the same on all pages, that would save a lot of work.

Thanks!

[Leo]

Hi there,

The image link is not working. Can you confirm?

Any chance you can show an example you are trying to create? Might be easier for me to help that way.

Reusable block is a WordPress feature unfortunately so hopefully they will make it better in the future.

I find the easiest way to copy a block is to copy the HTML.

[Carsten]

Hi there, sorry about the undefined link, here is what I want

View post on imgur.com

I can’t recreate the block element settings on another page, even though they apparently are the same, but i get this.

View post on imgur.com

In the Block editor it looks like full width

View post on imgur.com

Thanks!

[Leo]

Any chance you can link me to pages in question so I can compare where the difference is coming from?

[Carsten]

Sure, please let me know if you need admin access.

I want the Messages and /members page containers to look like the Activity page container.

Please note that the /members page container represent a third version of ‘full width’

Why does the /search page turn out as it does, with such a little hight? actually I like this narrow look, but I don’t know how to recreate it, as the settings of the container apparently are the same as the other pages.

Any documentation, how to copy the HTML to copy a block?

Thanks

[Leo]

This is actually not a GB issue.

So the GB in Activity page is directly under .entry-content class:
https://www.screencast.com/t/8Yfe3p6op1

Whereas the Messages page is wrapped in a buddypress <div> that is causing the issue:
https://www.screencast.com/t/lbGMr4iRU

[Carsten]

Its probably if the page is members-loop or not, and the activity page is not, but the BP primary content area is also full width on the messages page, so I do not quite understand, why does the block not appear as full width as well? Any suggestions how to solve it?

View post on imgur.com

Comments to the look of the container block on the /search page, why is it so narrow, it should be the same as the activity page?

[Leo]

BP is adding CSS that’s causing the issue:
https://www.screencast.com/t/E3YOcLVfUW

Or maybe that’s the CSS added by you?

[Carsten]

sorry i just updated my thread

[Leo]

Did you take a look at the short video I linked above?

That CSS I pointed out should be the issue.

[Carsten]

Ahh yes, I added the Flex box, and I can see that they share the same selector, that’s why

Thanks for solving this mystery!

[Leo]

No problem 🙂

[Carsten]

Found the right hook for the messages page so the container is under item-body, which solved the issue, thanks again!

[Leo]

Glad to hear 🙂

[Author]

Posts