[Resolved] Issue with container/grid element

Home Forums Support Issue with container/grid element

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1483582
    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

    #1483798
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1484184
    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

    #1485674
    Elvin
    Staff
    Customer Support

    Nice one. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.