[Resolved] Hook not firing on specific page PLUS container width issues

Home Forums Support Hook not firing on specific page PLUS container width issues

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1067132
    John

    Hi there,

    I have created a hook to load before_main_content which works on all of the pages on the site except for one:
    http://staging2.powertomakeadifference.com/blog/
    Can you help me figure our why that is?
    It is excluded from loading on the pages built using Beaver Builder, but every other page/post should have it loading.

    While inspecting this, I also noticed that the bottom of the site has an arrow which shows you can scroll further right.
    I cannot figure out why this is happening…seems like the conatiner is wider than the max-width of the site or something along those lines.
    Have you any suggestions to help fix that too?

    Many thannks!
    John

    #1067328
    David
    Staff
    Customer Support

    Hi there,

    GP Hooks only exist in the Theme Templates, so if you have used a BB Template to replace the page content then the Hooks do not exist.

    Any particular page or browser where i can see the overflow/horizontal scroll issue?

    #1078977
    John

    Sorry for the very slow reply – got working on other projects and only back to this now.
    That was the problem for the first issue- I updated the top of the page builder and all worked out.

    So if you go to this page: http://staging2.powertomakeadifference.com/about/
    And view it on a 14″ screen in firefox, you will see that there is a scroll bar at the bottom of the page.
    Is it something to do with the container width for the standard pages?

    Thanks again for your help

    #1079385
    David
    Staff
    Customer Support

    This CSS:

    .hero-divider {
        background-image: url(...URL...));
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 63px;
        margin-top: -88px;
        z-index: 1;
        margin-left: -595px;
        width: 2000px;
    }

    The width property is causing the issue

    #1092712
    John

    OK thanks for that update and again sorry about the slow reply.
    If I remove that width, then the element which it is supporting does not go full width.
    It is that ripped paper effect at the top of the screen.
    Any suggestions on how I can keep that full width of all screens without having that weird excess?

    #1093841
    David
    Staff
    Customer Support

    Maybe try moving the hero-divider div into the Header Element then use this CSS:

    .page-hero {
        position: relative;
    }
    
    .hero-divider {
        background-image: url(http://staging2.powertomakeadifference.com/wp-content/uploads/2019/09/slice.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 63px;
        z-index: 1;
        width: 100vw;
        position: absolute;
        bottom: -1px;
        left: 0;
    }
    #1093954
    John

    How do I move the hero-divider div into the Header element?
    Is there a quick tutorial on this somewhere i can review?
    Cheers!

    #1094821
    Tom
    Lead Developer
    Lead Developer

    The Header Element has a content input, so if you put the divider in there David’s CSS should work: https://docs.generatepress.com/article/header-element-overview/

    #1095382
    John

    Ah yes – OK – sorry – I was thinking about it all wrong.
    Thank you both for your help – that looks great now.
    Cheers for the awesome support, it really is the best.

    #1095660
    David
    Staff
    Customer Support

    Glad we could be of help

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