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

[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

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts