[Resolved] Header and container alignment issue

Home Forums Support [Resolved] Header and container alignment issue

Home Forums Support Header and container alignment issue

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #255424
    Dave Foy

    Hi Tom – I’m having a small issue with aligning the left edges of the header and container/content.

    What I’m trying to achieve is having the left edge of the logo and the left edge of the content area always in line with each other vertically.

    If I set padding left of 0 in the Customizer, for both the header and the container, then they remain in line, no matter what the screen size. However, this setting leaves the site looking cramped on small screens, because there’s no padding to leave a bit of ‘air’ at the left edge of the screen.

    So… in Customizer, I added 20px of left padding to the Container and the Header. This now adds some nice padding to the left edge of the screen on smaller screens – great. Also the header and container are still in line vertically. That’s great too. πŸ™‚

    The problem comes when increasing the screen size. Any greater screen width than 1100 (my container width) they lose their alignment. The container/content appears to have extra padding, pushing it out of alignment.

    I’ve gotten around this by zeroing out the padding in Customizer again, and then putting this in my child theme CSS:

    #masthead, #page {
    padding-left: 20px;
    }

    This leaves the nice padding for mobile and the header and content are always in alignment, at all screen sizes.

    This isn’t a bad solution, of course. But I’d love to figure out why I have to use custom CSS to achieve this, when the Customizer settings should work.

    I’ve recorded a quick video to show you what I mean. Hard to explain!

    Thanks very much indeed for your help.

    #255461
    Tom
    Lead Developer
    Lead Developer

    Hi Dave,

    Thanks for the video! Definitely helps πŸ™‚

    This is actually intentional, as we typically want the logo/header to align to the left of the menu area when the header width is set to full, but want that padding to kick it when small screens come along.

    Setting it to contained will make sure the padding is equal to the content area.

    You can also do this to make it so the full width header respects the padding as well:

    .inside-header {
        box-sizing: border-box;
    }

    Let me know if this helps or not πŸ™‚

    #255471
    Dave Foy

    Thanks for the speedy reply Tom!

    Yes I did have the inner header width set to ‘contained’. The ‘header width’ is set to full.

    Setting the box model on the inner header element to border-box definitely sorts it. So that’s great. Very happy with that. πŸ™‚

    Thanks again.

    Dave

    #255473
    Tom
    Lead Developer
    Lead Developer
    #255477
    Dave Foy

    Actually… it does throw up another issue (sorry!)

    With .inside-header set to ‘box-sizing: border-box’, the blog pages (and in fact any standard GP layout pages) are now great. But I also use Elementor on various pages (with ‘full width’ set using the page builder option), and now the edges of the logo and Elementor’s content aren’t aligned anymore.

    Basically, my header has internal 20px left padding, but in Elementor my full width ‘sections’ have 20px left padding on them. I set this to ensure there’s always enough padding for mobile, but full width sections with background colours can extend all the way to the left edge.

    Hmm. I can’t figure out a way around it. I actually can’t have my previously mentioned CSS 20px padding rules on #masthead and #page, because that doesn’t allow my Elementor full width sections to extend all the way to the edges of the screen. And I can’t have ‘box-sizing: border-box’ on the inner header, because that doesn’t align either.

    I’m a bit lost!

    Sorry… I know how 3rd party page builders operate isn’t really your concern… but do you have any other ideas?

    I can give access/logins if easier?

    Thanks again. πŸ™‚

    #255482
    Tom
    Lead Developer
    Lead Developer

    I always have ideas! πŸ˜‰

    What if you did this?

    body:not(.full-width-content) .inside-header {
        box-sizing: border-box;
    }
    #255533
    Dave Foy

    Perfect!

    You’re an absolute star Tom. Really appreciate your help. Huge thanks. πŸ˜€

    #255587
    Tom
    Lead Developer
    Lead Developer
    #262961
    Dave Foy

    Hi Tom,

    I’m sorry to bother you with this issue again. Very happy to buy you a few coffees to help me figure this out once and for all. I’ve spent literally hours on this and am going round in circles.

    Background: I’m working on launching a website-building course for graphic designers. I’ll be using GP with Elementor as the basis for everything. I’m keen to find a method for achieving consistent alignment and padding throughout. A pre-requisite of the course will be that students buy GP Premium. πŸ™‚

    Ok, to recap:

    I’m struggling to achieve consistent padding and layout between the following 2 types of page:

    1. Full width pages using Elementor.
    2. Standard pages, and pages related to posts (either default WP posts, or custom post type posts).

    It’s perfect on #1. It’s off on #2.

    (I’d like to send you the example of the site in development to show you what I mean, but I can’t post it publicly. Is there a way I can send you the link privately? The notes below reference the site in question.)

    I’m trying to achieve these 3 things:

    1. Left edges aligned vertically. Telephone icon in the top bar, logo, main content.
    2. Left and right 20px padding (so there’s breathing room on mobile).
    3. Needs to be exact same alignment on desktop and mobile.

    SETTINGS:

    1. Customiser > Layout > Container: one container, left and right padding 20px.
    2. Customiser > Layout > Header: Full width, Contained. Left and right padding 20px.
    3. In CSS:

    body:not(.full-width-content) .inside-header {
        box-sizing: border-box;
    }

    (You suggested this in an earlier support thread about a similar issue. It sort of solves some things but breaks others)

    4. In CSS:

    .full-width-content .elementor-top-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    On full width pages where I use Elementor, this provides the 20px left and right edge padding to give breathing room on mobile. I limit this to full width pages only, so that if I use Elementor within a default fixed width page, it doesn’t add extra padding on top of the default padding.

    CORRECT:

    On the example below, the telephone icon in the top bar lines up with the logo, which lines up with the content below it, on desktop and mobile.

    1. Standard full width page with Elementor (/why-use-a-consultant/) – Perfect.

    INCORRECT:

    On all 3 of the below examples, the logo and the main content are aligned correctly, but on desktop are not aligned with the telephone icon in the top bar. Perfect on mobile.

    1. Standard page (/training/).

    2. Archive pages (/blog/) and single post pages (/prefabricated-buildings-meet-demand-new-homes/).

    3. Single post page that uses Elementor (/projects/london-university-arts-shoreditch/) – this is NOT a full-width page FYI.

    And finally, just a thought: should I maybe be setting my 20px left and right padding on .grid-container in CSS, and set Customiser layout padding to 0? Not sure if that would simplify things. Probably not!

    Thanks hugely for your help.

    Dave

    #263031
    Tom
    Lead Developer
    Lead Developer

    Hi Dave,

    Feel free to send the link through the contact form and I’ll take a look: https://generatepress.com/contact/

    Setting padding on .grid-container will add padding to multiple elements throughout the theme as that class is used to set the container width on the header, content and footer.

    #263062
    Dave Foy

    Huge thanks Tom. Email just sent.

    I only mentioned the .grid-container idea as my objective is to have a consistent 20px left and right padding on all containers. My thinking was (I’m sure flawed!), is that if I set that padding on .grid-container it would achieve the same thing I’ve done previously with hand-coded sites – setting a ‘wrapper’ class with left and right padding, that can be used to wrap headers, content area elements, footer, etc.

    Thanks again for your help.

    #263138
    Dave Foy

    Just thought: a problem with the CSS in point #4 in my ‘Settings’:

    .full-width-content .elementor-top-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    I limited this to ‘.full-width-content’ to avoid additional padding being added when Elementor is used in the standard non full-width template. Meaning, if the main content area already has 20px left and right padding (from GP, on standard pages), I don’t want Elementor to add even more.

    But… on ‘standard’ layout pages, this will then stop Elementor elements that are outside the main content area (like the top bar with the contact details on this site) having the 20px left and right padding too. Aargh!

    I think I’m tired, but I can’t figure out the CSS to make ALL Elementor sections/rows have the 20px padding, unless they’re inside the content area of a standard non-full-width layout template.

    #263236
    Tom
    Lead Developer
    Lead Developer

    For this specific problem, you would do this:

    .elementor-section.elementor-section-boxed > .elementor-container {
        padding: 0 20px;
        box-sizing: border-box;
    }

    Then remove the 20px of padding from that element in Elementor.

    Hard to come up with one solution that will work for everything unfortunately, there’s so many variables.

    You could remove the .inside-header border-box CSS you added, then remove the content padding completely which will also line everything up. Then you just have to add padding on mobile.

    #264599
    Dave Foy

    Hi Tom – thank you so much for looking into this further. I really appreciate it. Sorry for the delayed reply.

    I think I’ve cracked it. πŸ™‚

    In the interests of providing the trail in case anyone else has a similar issue, here’s what I did.

    1. Zero out left and right padding in Customiser. This seems to make all the difference in terms of controlling what’s happening in the various situations I outlined.

    2. Added this code to my child theme:

    /* Set some breathing room for small screens here, not in Customiser, to avoid various
    layout issues */
    .inside-header, #page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Remove the above padding if we're on a GP full width page, so Elementor sections can
    stretch to screen edges */
    body.full-width-content #page {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Add same spacing as above to the right edge of the main column */
    .one-container.right-sidebar .site-main, .one-container.both-right .site-main {
    	margin-right: 20px !important;
    }
    .one-container.left-sidebar .site-main,.one-container.both-left .site-main {
    	margin-left: 20px !important;
    }

    3. And added this further CSS affecting Elementor only, basically replicating the same ‘theme’ padding rules for Elementor too:

    /* Add the same padding as above, to allow breathing room on small screens when using ELementor
    in GP full width pages  */
    .elementor-top-section {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Remove the above padding when NOT on a full width page, to avoid Elementor rows being 
    pushed in a further 20px */
    body:not(.full-width-content) .elementor-top-section {
    	padding-left: 0;
    	padding-right: 0;
    }

    It works for me anyway. Now I have consistent padding and alignment on all size screens and in all situations I can throw at the site (e.g. default WP pages, archive listings, single posts, Elementor full width layouts, Elementor boxed layouts, etc.)

    Thanks again for all your help. Really appreciated.

    Dave

    #264630
    Tom
    Lead Developer
    Lead Developer

    Beautiful, thanks so much for sharing your code πŸ™‚

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