[Resolved] Block element stays aligned to the left

[Oliver]

Whenever I created a block element like a new footer or a call to action section, the block would normally appear aligned to the rest of the content, in other words, it would be the same container width as the site is set under customize. Somehow, I just can´t figure out how to achieve this with a couple of blocks I inserted as elements. Here is the website in question and the elements are the footer element and the one right before the footer

[Fernando]

Hi Oliver,

Try giving the Container Block a margin left and right value of auto.

Reference: https://docs.generateblocks.com/article/spacing-overview/

[Oliver]

Hi Fernando. It didn´t work

[Fernando]

I can’t seem to view the site right now. Did you disable it from being viewable or is it inaccessible right now?

[Oliver]

Sorry for that… it´s a coming soon mode.
Now it should work

[Fernando]

I’m looking at the Parent Container for the Site Footer.

It still isn’t set to have auto left and right margins upon viewing.

Which Container did you apply the change on?

[Oliver]

It was the one before the footer. But now I have also applied it to the footer and it worked. So we only have to figure out why the container before the footer is not automatically applying the margin even though it is set to do so.

[Oliver]

I just noticed a difference between the blocks I normally hook as element and the ones in question. Normally i´d get the width options like in the first screenshot. The containers in questions are not showing me the options but instead are showing me the options on screenshot 2. What did I do differently?

one
two

[Fernando]

Was this Container Block created after the recent update? If so, there should be a Sizing section where you can add a max-width: https://docs.generateblocks.com/article/sizing-options-overview/

[Oliver]

Fernando yes I did and yes it works. will the old containers ever change to show the new options? or do i have to manually set it up like the new search interface?

Edit:
So I got the width part right but I am having a problem with two query loop elements, one is a block element added as the right bar and the other one is in the container I just mentioned right before the footer. I can´t figure out why it is not showing one post at a time in the right sidebar and three posts in the container before the footer, as seen in the pictures below

picture one
picture two

[Fernando]

No. Old Containers shouldn’t automatically update to the newer version.

I can’t seem to access the site again. Can you make it accessible again?

[Oliver]

I´m sorry Fernando it is accessible again

[Fernando]

Add this snippet:

add_filter( 'post_class', function( $classes ) {
	if ( ! is_admin() && in_array( 'gb-query-loop-item', $classes ) ) {
		$index = array_search('generate-columns',$classes);
if($index !== FALSE){
    unset($classes[$index]);
}
		
	}

	return $classes;
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Oliver]

It worked, thank you very much. Just out of curiosity and to know what to name the snippet… what exactly is it doing to fix the display issue?

Edit: I´m having the issue that after creating a similar block element to populate with other content, the settings I changed on the first block element are directly mirrored in the second. So whatever i do to the first container in terms of layout and color, ends up being applied to the other container as well. You´ll notice both containers look the same, but i just edited one.

[David]

Hi there,

GP uses the post_class filter to add its blog setting classes to any posts on a archive / index page. And those currently get picked up by the Query Loop. Fernandos snippet uses the same filter to remove them.

If you copy and paste from one post to another ( or one element to another ), duplicate the pasted block and delete the original. This will refresh the unique CSS classes of the block and stop that kind of conflict.

[Author]

Posts