[Resolved] Gap between image and heading on mobile view

Home Forums Support [Resolved] Gap between image and heading on mobile view

Home Forums Support Gap between image and heading on mobile view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1656750
    Allan

    On mobile view, two grid rows lack a gap:

    no gap between grid rows

    The site is https://workgadgets.ph

    This page is made with GenerateBlocks. They’re two columns of a Grid that stacks on top of each other on mobile view.

    On other themes, e.g. Twenty Twenty, there’s a big enough gap:

    I know I can simply add a gap below the image so there’s some space for the mobile view, but it doesn’t seem like a clean practice.

    Is this a matter of changing spacing on top of Heading text? If so, what setting should I adjust?

    Thanks!

    #1656811
    David
    Staff
    Customer Support

    Hi there,

    the simplest solution is to add some vertical Gap to your Grid Block, you can set them specifically for each device size:

    https://docs.generateblocks.com/article/grid-overview/#editing-the-grid-block

    For future GB related questions can you please raise a topic in the GB Support forum. We also have a GB Community you can join:

    https://community.generateblocks.com

    #1658392
    Allan

    Thanks, David!

    As for the theme, do you reckon there’s a gap for either the top of headings or below images/other text elements?

    I wonder why I don’t need to add the extra padding for other themes such as Twenty Twenty or Storefront.

    Maybe that one setting is a clean way so I won’t have to modify gaps for mobile views in the future.

    P.S. Thanks for sharing the GB forum! Didn’t know it existed.

    #1658417
    Elvin
    Staff
    Customer Support

    Hi there,

    I wonder why I don’t need to add the extra padding for other themes such as Twenty Twenty or Storefront.

    Twenty-twenty adds in its own margin-bottom: 3rem to image blocks while GeneratePress uses the block library’s default style found in /wp-includes/css/dist/block-library/style.min.css which is a WP core styling.

    Now if a theme doesn’t have its own specific styling for this, the WP core block styling will apply unless there’s a plugin that styles this specifically as the plugin’s stylesheet wins in CSS precedence.

    That said, while GeneratePress doesn’t have any styling particular to image blocks like Twenty-twenty did, GB’s Grid Block has one. This is actually the one you see on your site.

    You’ll find this when you inspect the page.

    .gb-grid-wrapper .wp-block-image {
        margin-bottom: 0;
    }

    But we can simply override that with this CSS on mobile for all of the wp-block-image instead of adding a manual “spacer” everytime you use an image block.

    @media(max-width: 768px){
    .gb-grid-wrapper .wp-block-image {
        margin-bottom: 50px;
    }
    }
    #1659723
    Allan

    Thanks for the thoughtful breakdown, Elvin!

    Great to know the added spacing is below the image (instead of above headings)… and that the story behind is themes and block plugins may or may not have such CSS settings.

    Nice mobile-only gap CSS:

    Cheers!

    #1659743
    Elvin
    Staff
    Customer Support

    Glad to be of any help. No problem. 😀

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