Problems with mobile friendliness

Hi there,

Can you clear and disable all your caching plugins first?

This GB container has massive left and right margin set:
https://www.screencast.com/t/9fGic086aasM

To build a Contained section in a full-width page like this here:
https://www.screencast.com/t/weZ2gCKUFKAA

Please use an Inner Container as suggested here:
https://docs.generateblocks.com/article/container-overview/
https://docs.generateblocks.com/article/add-inner-container/

Which section are you referring to now?

Can you clear and disable your caching plugins again and keep them disabled while we are helping?

Hi there,

The issue here is coming from the sections with the green background color. Instead of fixing it, it’s better to rebuild it in a much easier way.

I’ve created a sample of how I would build the section. First, open a new draft page, click the 3-dot menu at the top right, and select Code Editor. Then add this HTML markup:

<!-- wp:generateblocks/container {"uniqueId":"03945203","backgroundColor":"#8bbec1","isDynamic":true,"blockVersion":4} -->
<!-- wp:generateblocks/container {"uniqueId":"43dfd22d","isDynamic":true,"blockVersion":4,"useGlobalMaxWidth":true,"spacing":{"marginRight":"auto","marginLeft":"auto","paddingTop":"30px","paddingBottom":"30px"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"9bf6767d","columns":2,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"adaae536","isGrid":true,"gridId":"9bf6767d","isDynamic":true,"blockVersion":4,"sizing":{"width":"75%","widthMobile":"100%"},"typography":{"textAlignMobile":"center"},"spacing":{"marginRight":"80px","marginRightMobile":"20px","marginLeftMobile":"20px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"5f76c28a","blockVersion":3,"typography":{"fontSize":"30px","fontWeight":"700"}} -->
<h2 class="gb-headline gb-headline-5f76c28a gb-headline-text"><strong>Reiseblog für Individualreisende, Abenteurer und Weltentdecker!</strong></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"db2c0bab","element":"p","blockVersion":3,"typography":{"fontSize":"17px"},"spacing":{"marginBottom":"1.5em","paddingRightMobile":""}} -->
<p class="gb-headline gb-headline-db2c0bab gb-headline-text">Hallo Explorer! Du bist auf der Suche nach dem nächsten exotischen Reiseziel?<br></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"9a3286c2","element":"p","blockVersion":3,"typography":{"fontSize":"17px"},"spacing":{"marginBottom":"1.5em"}} -->
<p class="gb-headline gb-headline-9a3286c2 gb-headline-text">Dann sprichst du vermutlich die gleiche Sprache wie ich.<br></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"2a106246","element":"p","blockVersion":3,"typography":{"fontSize":"17px"},"spacing":{"marginBottom":"1.5em"}} -->
<p class="gb-headline gb-headline-2a106246 gb-headline-text">Ich bin Tom von Explorer-Tom und brenne stets für neue Reisen.<br></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"6314756b","element":"p","blockVersion":3,"typography":{"fontSize":"17px"},"spacing":{"marginBottom":"1.5em"}} -->
<p class="gb-headline gb-headline-6314756b gb-headline-text">Mittlerweile habe ich über 50 Länder unserer Erde bereist. Neben Osteuropa habe ich vor allem ein Faible für Südostasien.<br></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"e2074a3c","element":"p","blockVersion":3,"typography":{"fontSize":"17px"},"spacing":{"marginBottom":"1.5em"}} -->
<p class="gb-headline gb-headline-e2074a3c gb-headline-text">Auf meinem Reiseblog berichte ich von authentischen und ungeschönten Reiseerfahrungen, Sehenswürdigkeiten und Highlights.<br><a href="https://explorertom.com/ueber-mich/" target="_blank" rel="noreferrer noopener"></a></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button {"uniqueId":"659a3e7a","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-659a3e7a gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"7f7396a2","isGrid":true,"gridId":"9bf6767d","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","sizing":{"width":"25%","widthMobile":"100%","maxHeight":"","minHeight":"100%"},"spacing":{"marginTop":"","marginBottom":"","paddingTop":"","paddingBottom":""}} -->
<!-- wp:generateblocks/container {"uniqueId":"ab7fc746","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItemsMobile":"center","rowGap":"30px","spacing":{"marginTop":"auto","marginBottom":"auto"}} -->
<!-- wp:generateblocks/image {"uniqueId":"d083db2c","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-d083db2c"><img class="gb-image gb-image-d083db2c" src="https://explorertom.com/wp-content/uploads/2024/06/cropped-ich-kreis-300x300-1.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/container {"uniqueId":"281a2414","isDynamic":true,"blockVersion":4,"display":"flex","alignItems":"center","justifyContent":"center","columnGap":"20px"} -->
<!-- wp:generateblocks/image {"uniqueId":"1eca4958","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-1eca4958"><img class="gb-image gb-image-1eca4958" src="https://explorertom.com/wp-content/uploads/2024/02/facebook-icon_square_32x32.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/image {"uniqueId":"54dda1de","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-54dda1de"><img class="gb-image gb-image-54dda1de" src="https://explorertom.com/wp-content/uploads/2024/02/instagram-icon_square_32x32.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/image {"uniqueId":"2d48f9e3","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-2d48f9e3"><img class="gb-image gb-image-2d48f9e3" src="https://explorertom.com/wp-content/uploads/2024/02/pinterest-icon_square_32x32.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Switch back to Visual Editing, and you can check how the layout was constructed.

Hi there,

open the list view in the editor,
You will see the list of top level Container Blocks, each of them are the sections on the page.

Shift + Click to select all of them.
Then in block settings Spacing set the Padding Left & Right to 40px on Desktop, 30px on Tablet and 20px on Mobile.

The border issue is an inherent problem with that kind of design. To offset the borders position means it can escape out the viewport.

I am not sure there is a good solution, accept to modify it so the right hand line doesn’t exist on mobile. Let me know.

Select the problem gird column Container Block, and in Mobile view set its Sizing > Width to 100%.

OPTION A – apply only the borders to desktop

Replace your current CSS with this:

@media(min-width: 769px) {
    .has-border-line {
        position: relative;
        display: inline-block;
    }
    .has-border-line:after {
        content: '';
        position: absolute;
        inset: 0 -1ch -0.75ch 2ch;
        border-bottom: 5px solid;
        border-right: 5px solid;
        border-color: #ccc;
    }
}

OPTION B – remove the right hand border on mobile.,

Keep the current CSS and add this to it:

@media(max-width: 768px) {
    body .has-border-line::after {
        inset: 0 0 -0.75ch 2ch;
        border-right: 0;
    }
}