Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Problems with mobile friendliness

  • Hi,

    unfortunately I need your help again today…
    I created a new start-page but now it seems like it is no mobile friendly. What settings do I have to adjust?

    It works perfectly on desktop PCs

    explorertom.com/17324-2/

  • 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/

  • Wow, I never heard of that! I adjusted all blocks and adapted inner blocks but unfortunately the problem still persists….

  • Which section are you referring to now?

  • well the entire page looks crappy on my smartphone

    explorertom.com/17324-2/

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

  • of course! done

  • 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 Alvind,

    that looks already much better, even though I could not recreate your steps on my own for my learning process.

    Unfortunately there is still some minor issues as the spacing within the head lines, the border line setting on one head line and picture in the 4-grid that is smaller than the others, even though it has the same settings…

    Please have a look:

    https://ibb.co/MMZy4mj
    https://ibb.co/QPVn15x
    https://ibb.co/3SxDR8H

  • 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.

  • Hi David,

    I am getting closer. The spacing issue is fixed now, but there is still minor issues with the border line and one picture of a grid.

    https://ibb.co/x8NSbm9
    https://ibb.co/FKK5xmL
    https://ibb.co/xCmT9V0

    Is there anything we can do about it?

  • 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%.

  • Picture issue solved, great!!

    It would be an option to disable the right hand line or even both borderlines on mobile view. Can you provide 2 different solutions on that?

  • 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;
        }
    }
    
Viewing 16 posts - 1 through 16 (of 18 total)
  • You must be logged in to reply to this topic.