[Support request] Strange gap in nav

Home Forums Support [Support request] Strange gap in nav

Home Forums Support Strange gap in nav

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1971509
    Kris

    Hi guys,

    Please review https://sandbox.digpublish.com homepage.

    At full width all looks nice, but when I change the browser size smaller a white gap opens up between the top nav. and the main banner photo. See arrow 1.

    I have made the banner photo full width with the following code:

    <!– wp:image {“id”:208,”sizeSlug”:”full”,”className”:”alignfull”} –>
    <figure class=”wp-block-image size-full alignfull”></figure>
    <!– /wp:image –>

    Not sure if this is the correct way doing this, since also a very small horizontal scroll appears now at the bottom. See arrow 2.

    Image here: https://sandbox.digpublish.com/wp-content/uploads/2021/10/gap.jpg

    Please advice.

    Cheers,
    Kris

    #1971526
    Elvin
    Staff
    Customer Support

    Hi Kris,

    That gap you see is the container padding set on smaller viewports. This setting is found on Appearance > customize > Layout > Container.

    It’s the one indicated here – https://share.getcloudapp.com/4guPxBpW

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

    #1972441
    Kris

    That did the trick, mate! Thanks, Elvin!

    What about the small sideways scrollbar at the bottom? Why is it there, and can I get rid of it?

    Cheers,
    Kris

    #1972591
    David
    Staff
    Customer Support

    Hi there,

    the horizontal scroll occurs when using the Full Width option on a block in the editor. This is due to certain browsers including the vertical scrollbar within the page content.

    The best solution is to NOT use the Full width block options.

    Instead:

    1. Set the pages Content Container to Full Width:

    https://docs.generatepress.com/article/content-container/

    2. Then use the GenerateBlocks plugin to add Container Blocks to create Full width and Contained sections on your page.

    https://docs.generateblocks.com/article/container-overview/

    This way you do not need to set the Full Width alignment option on the block.

    #2020786
    Kris

    Hi David,

    I’m test driving the GenerateBlocks today,mate.

    I’m running the latest GP version but my Container panel looks different from your example.
    https://docs.generatepress.com/article/content-container/

    This is my panel:
    https://trolleyservice.fi/wp-content/uploads/2021/11/container.jpg

    Where/how can I actually set the pages Content Container to Full Width?

    Thanks for your help, mate!

    Cheers,
    Kris

    #2020805
    Elvin
    Staff
    Customer Support

    Hi Kris,

    I’m test driving the GenerateBlocks today,mate.

    Nice one! it’s worth learning. 😀

    This is my panel:
    https://trolleyservice.fi/wp-content/uploads/2021/11/container.jpg

    This one is the customizer setting.

    The setting David pointed out is found on the page’s setting within the Block editor when you are editing the page. It’s on the page’s Layout tab.
    https://share.getcloudapp.com/d5u6jXqd

    And then you set the Container blocks’ setting as well which is also found within the Block editor.

    Here’s a demo video on locating it – https://share.getcloudapp.com/OAuGvZeZ

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

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