[Resolved] Hook Alignment

Home Forums Support Hook Alignment

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #359099
    Paul

    Can you tell me why the before header hook here – http://style960.com/smb aligns outside of the container width between 768 and 1200px only?

    Below 768px or above 1200px the alignment is fine.

    Thanks,
    Paul.

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #359171
    Leo
    Staff
    Customer Support

    Hi Paul,

    Not quite sure what you mean? This is what I’m seeing around 1060px and looks like it’s within the container?
    https://s4.postimg.org/hnn7hm1pp/beforeheadercontainer.png

    #359254
    Paul

    Hi Leo,

    The content in the before header hook (ending with the social icons list) is aligned further to the right than the last main menu item – how can I have that content pad the same as the menu so they align with each other?

    Thanks.

    #359303
    Leo
    Staff
    Customer Support

    Hmm try adding grid-container grid-parent with smb-before-header instead of inside-smb-before-header

    Then you apply the same header padding (as shown in screenshot) to that container so they match.

    #359340
    Paul

    That moves that div to the left, doesn’t span the window. Unable to correct with a margin setting.

    #359348
    Leo
    Staff
    Customer Support

    Can you simply try this in the Before header hook? I just tried this and it should work:

    <div class="before-header grid-container grid-parent">
            Your before header HTML content here
    </div>
    #359418
    Paul

    That gives me the same result I described above

    #359419
    Paul

    SMB

    #359469
    Leo
    Staff
    Customer Support

    Any chance you can leave the code in there so I can see why it’s not working on your end?

    This is the result when I try on my end: http://www.screencast.com/t/6yY4wgQELUe

    You can see that everything is within the container.

    #359587
    Paul

    Ok I’ve rewritten the HTML as suggested:

    hook does not span the width of the window above 1025px
    content of the hook does not align with the main menu above the 767px breakpoint

    This might be an error in my css, but some hook examples – the html and css required – might be useful in the docs.

    #359693
    Leo
    Staff
    Customer Support

    I thought you didn’t want the bar to span the entire window?

    And yeah there seem to be a lot of CSS in there. Here are some pointers:

    You shouldn’t need this one as it’s the same as using grid-container:

    .smb-before-header-desktop {
        max-width: 1100px;
    }

    Here are GP’s responsive breakpoints: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    Make use of the built in classes: hide-on-mobile hide-on-tablet hide-on-desktop

    If you want the edges to line up then the left and right padding needs to be removed:

    .smb-before-header {
        padding-left: 0;
        padding-right: 0;
    }
    #360134
    Paul

    Re-written the html and css, both are now reduced but still can’t get this to align properly. I had to add another breakpoint in the css of 1200px. But resize between 1100px and 1200px and you’ll see the content of the hook does not align with the main menu.

    Really struggling with this, spend hours on a hook with a phone number, and email address, and some social links in.

    As I said previously, some working examples of hooks would be useful for myself and others.

    #360187
    Leo
    Staff
    Customer Support

    Try removing this: <div class="grid-container grid-parent">

    and added with this: <div class="smb-before-header-content grid-container grid-parent">

    Then adjust the CSS to this:

    @media (min-width: 768px) {
        .smb-before-header-content {
            padding-right: 40px;
            text-align: right;
            padding-left: 40px;
        }
    }

    Shouldn’t need this piece either:

    @media (min-width: 1200px) {
        .smb-before-header-content {
            padding-right: 0px;
            text-align: right;
        }
    }

    There are too many examples of what can be done with hooks and the CSS to go with it so I don’t think we can cover what everyone has in mind using examples.

    #360222
    Paul

    I think we have crossed wires here. I’ve changed the html & css as you suggested but I’m then left with the content breaking onto a second line on a mobile using portrait orientation, and between 768-1024px the content jumps to the left before aligning to the right above 1024px.

    I’ve changed the html & css back again.

    If the screen is too small to show phone number, email address, and social icons, I drop the email address and center the content – this works.

    If the screen is large enough to display all three then the content is right aligned – but in line vertically with the content below it i.e. – the main menu links.

    This all works apart from between 1100 and 1200px.

    #360237
    Leo
    Staff
    Customer Support

    There is nothing in GP’s grid system or media query that changes how things are displayed between 1100 to 1200px.

    It’s difficult for me to tell why things aren’t working if you don’t leave the code in there.

    Here is the result I see at 1180px using the structure I suggested: https://s1.postimg.org/yfv2otcq7/lineup.png

    As you can see that things are lining up.

    It might need a little more tweak for the responsive issue but can you leave the code so I can see what’s causing the problem?

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