[Resolved] Issue with container/grid element

[Francesco]

Hello,

I am building a page using the container and grid elements.

I already added 3 containers and everything is fine, but as soon a s I try to add another container, the pages loses it’s paddings and center-alignments, it looks like something gets lost in the HTML/CSS.

The test url is: http://www.fralenuvole.art/test/

This is the code that I have in the editor (the last container is the one that that scrambles the page after adding it):

<!-- wp:generateblocks/container {"uniqueId":"b46699a5","cssClasses":"dark-theme","alignment":"center"} -->
<div class="gb-container gb-container-b46699a5 dark-theme"><div class="gb-inside-container"><!-- wp:heading {"level":3} -->
<h3>Featured articles</h3>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[wp_show_posts id="8634"]
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p><a href="/tag/featured/" class="rank-math-link">All featured articles »</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"24ede7da","alignment":"center"} -->
<div class="gb-container gb-container-24ede7da"><div class="gb-inside-container"><!-- wp:heading {"level":3} -->
<h3>All articles</h3>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[wp_show_posts id="8661"]
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p><a href="/blog/" class="rank-math-link">All articles »</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:generateblocks/container -->

<!-- wp:columns {"className":"dark-theme"} -->
<div class="wp-block-columns dark-theme"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":8737,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.fralenuvole.art/wp-content/uploads/2020/10/angel-edited-1024x575.jpg" alt="Angel" class="wp-image-8737"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":6779,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.fralenuvole.art/wp-content/uploads/2020/07/davide-1024x576.jpg" alt="Davide" class="wp-image-6779"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":6482,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.fralenuvole.art/wp-content/uploads/2020/06/anchor-reality-1024x576.jpg" alt="Anchor to reality" class="wp-image-6482"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:generateblocks/container {"uniqueId":"aab772eb"} -->
<div class="gb-container gb-container-aab772eb"><div class="gb-inside-container"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">TEST CONTAINER</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:generateblocks/container -->

Kind regards, Francesco

[Elvin]

Hi,

This is the code that I have in the editor (the last container is the one that that scrambles the page after adding it):

Strange. I’ve used your code on a sandbox site and it doesn’t do any “scrambling”.

I’ve checked your site and I don’t notice anything “scrambled” either. Perhaps I didn’t fully understand what you meant.

That said, can you explain a bit more? Screenshots will be very helpful.

If you were pertaining to the the 3 images going full-width. That’s because you’re using Gutenberg’s WP columns, which you can’t add max-width unlike GB containers.

Since you’re already using GenerateBlocks containers on the other blocks, I recommend using GenerateBlock’s Grid Block for this.

Or control the content width of a single post w/ Layout Element so you don’t have to set the max-width for all containers.

By the way. This is how your site looks like on my end. https://share.getcloudapp.com/4guJ9lp8

Are we seeing the same thing?

Let us know if it differs.

[Francesco]

Hi,

thank you for your detailed answer that helped me debugging!

I cleared the cache and now I see the same of your screenshot, which is as intended.

If you were pertaining to the the 3 images going full-width. That’s because you’re using Gutenberg’s WP columns, which you can’t add max-width unlike GB containers.

Yes I added the Gutenberg columns only because at first I was not able to use the GB container, and with/without them, it did anyway not make any difference.

Maybe an interesting note for you:
Yesterday When I added the last GB container the layout was scrambled, when I removed it, the layout looked fine, even if I never cleared the cache during the changes.

Anyway now it’s fine and I can continue use the preferred GB containers.

Thank you very much.

Kind regards, Francesco

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts