Archived topic
Issue with container/grid element
3 replies · Started by Francesco on October 11, 2020
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
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.
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
Nice one. No problem. :)
