- This topic has 9 replies, 3 voices, and was last updated 3 years, 1 month ago by
David.
-
AuthorPosts
-
November 19, 2019 at 1:06 am #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!
JohnNovember 19, 2019 at 5:49 am #1067328David
StaffCustomer SupportHi 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/November 26, 2019 at 8:46 pm #1078977John
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
November 27, 2019 at 3:06 am #1079385David
StaffCustomer SupportThis 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/December 4, 2019 at 12:20 am #1092712John
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?December 4, 2019 at 5:08 pm #1093841David
StaffCustomer SupportMaybe 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/December 4, 2019 at 8:05 pm #1093954John
How do I move the hero-divider div into the Header element?
Is there a quick tutorial on this somewhere i can review?
Cheers!December 5, 2019 at 9:30 am #1094821Tom
Lead DeveloperLead DeveloperThe 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-developmentDecember 5, 2019 at 10:04 pm #1095382John
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.December 6, 2019 at 4:37 am #1095660David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.