[Support request] My Header Element is Wider than the Body of my Page.

Home Forums Support [Support request] My Header Element is Wider than the Body of my Page.

Home Forums Support My Header Element is Wider than the Body of my Page.

  • This topic has 9 replies, 2 voices, and was last updated 2 months ago by Fernando.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2237270
    catbiscuits

    Ok, I’m new to GeneratePress Pro. It seems to be powerful and great for my needs, but to be honest, the documentation needs some work. Some of it is outdated, some of the information is obscure, some of the links on the site are literally dead. I am doing what I can with it.

    I am now running into the following issue. I am trying to create a header element that is merged with the site menu and that is in line with the width of the page body. For example, let’s take this web site https://grownativemass.org (even though it is in Drupal… which I never, ever want to see again after 15 years of that nightmare). Imagine that the top blue section with the flower, search bar and title and the menu were all merged into a header in generatepress. Note how the image below, which could be a page hero but could also be just an image in the block on the page aligns perfectly with the header. Everything aligns on the left and right from the header through the body. That’s what I want. So now I run into this problem.

    bad site, bad

    Note how the image in the body aligns with the logo and menu in the header element, but the background image extends beyond both edges. Container and Inner Container are set to “contained.” What should I do?

    #2237325
    Fernando
    Customer Support

    Hi Catbiscuits,

    Let’s start with changing the forum Display Name, if that’s what you’re referring to.

    It can be change through this link: https://generatepress.com/account/

    With regards to the documentation, it’s a constant work in progress, and our team is constantly updating and adding new docs to help our users further. We’ll try to improve them more. Thank you for the feedback!

    With regards to the spacing causing the disparity in the width of the header and the content, in Appearance > Customize > Layout > Container, can you try setting the Content Padding values to 0?

    Kindly let us know how it goes. 🙂

    #2237368
    catbiscuits

    Hi Fernando,

    Thanks so much. Oh jeez, Container Padding. I remember that from the bad old days in Drupal, but I’m glad to get such fast, courteous, and insightful support. Yes, that worked. Much, better!

    #2237372
    Fernando
    Customer Support

    You’re welcome Catbiscuits! Glad to be of assistance!

    #2239716
    catbiscuits

    Is there any way to pad the sides of the whole page, e.g. the container for header, the body, and the footer by a few pixels?

    #2239724
    Fernando
    Customer Support

    Are you planning to reduce the width of your site?

    Perhaps you can try reducing the Container Width in Appearance > Customize > Layout > Container?

    This in turn should alter the width of the whole page.

    Otherwise, if you want to add padding, you’ll need to alter them in the Customizer. Specifically, in Appearance > Customize > Layout > Container, Header, and Footer.

    Hope this clarifies!

    #2240299
    catbiscuits

    Hi Fernando,

    Let me be super specific. The goal is to deal with iPads (big enough that they don’t use the mobile theme) and other small screens in which the text in the body is right up against the edge of the screen. I’d like a little space between the text and the side. It works if I add a couple of pixels of padding to the container in the customizer, but then the background image of the header pokes out a couple of pixels past the container. If I add padding to the header (I am using a header element), that makes the text in the header move, but not the background. I suppose the problem is that I am using a background image, but I don’t really want to rebuild the header element completely (esp. because I don’t fully understand how it works). I think in the end I will probably replace the background image with a drawing that is white at the ends and that will take care of it, but if that doesn’t fly with the nonprofit, it would be good to come up with another solution.

    (PS no way to change my profile picture is there?).

    #2240807
    Fernando
    Customer Support

    Starting with the Profile Picture, the forum gets the image Gravatar: http://en.gravatar.com/. The email you used here should be the email used in Gravatar.

    Thank you for clarifying.

    If that’s the case, one approach is to add this CSS in Appearance > Customize > Additional CSS:

    @media (min-width: 769px) and (max-width: 1024px) {
        body {
            margin-left: 5px;
            margin-right: 5px;
        }
    
        .header-wrap {
            margin-left: 5px;
            margin-right: 5px;
        }
    }

    This would add margins to your entire site on Tablet view solely.

    Kindly let us know how it goes.

    #2241919
    catbiscuits

    That worked great! Super.

    So there is one last thing. Take a look at the front page of my development site right now. http://staging.networkedpublics.org/

    I have tried using grids, I have tried using columns, but try as I might, I can’t figure out why the headline and the top of the photo don’t align.

    #2242000
    Fernando
    Customer Support

    You’re currently using a WP Columns Block. Can you try using a GB Grid Block instead? This would give you more options to modify the spacing, and it should allow you to align them properly at the top.

    Reference: https://docs.generateblocks.com/article/grid-overview/

    The upcoming update of GenerateBlocks also has an Image Block which has spacing options: https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

    Hope this helps!

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