- This topic has 11 replies, 2 voices, and was last updated 10 months, 4 weeks ago by
.
-
Posts
-
Hello,
I’m using a hook element with the inside_container hook to add a slider on my front page. I want to remove the 40px padding for the slider div while keeping it for the rest of the content on the page. However, if I set the padding for the .site-content class to 0 it messes up the rest of the page. What is the best way to achieve the desired layout?
Much thanks!
Customer Support
Hi there,
Try using the header element:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/how-to-create-a-page-hero/Let me know if this helps 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/I tried it with the header element initially, but then the background color of the header extended to the bottom of the slider. I’m trying to get the slider image to fill the width of the grid-container and have the body’s background-color on each side of the slider image. Any other suggestions much appreciated.
I tried it with the header element initially, but then the background color of the header extended to the bottom of the slider.
Not quite sure if I understand, can you show me the issue?
Header element is definitely the way to go – it’s built for something like this.
Make sure you go through the tutorial here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/I edited the web URL to point to a page I created to show this scenario. The “home-test” page represents what happens with putting the image in a header element. The “home” page exhibits the image in the hook. For this example, to simplify things I’m just using a single image instead of a slider.
Thanks again for your assistance!
Try turning off merge with content for the element:
https://docs.generatepress.com/article/header-element-overview/#merge-with-contentDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/The problem that I ran into when I turned off merge with content was with the display of the image on the right side of the header. I want that image to show through the navigation bar (as it does on the “home” page). I couldn’t find a way to make that happen when I turn off merge with content.
Ahh ok. That case we need to scratch the header element idea and go back to using the hooks as you were doing before.
This time try the
before_main_contenthook:
https://docs.generatepress.com/article/hooks-visual-guide/Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/That didn’t work either. See result on “home-test” page.
Hmm try this:
https://www.screencast.com/t/QZqCeILQxNJCDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Wow! I believe that is precisely the solution I’ve been searching for!
Thank you so very much for your help!!
No problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.