- This topic has 11 replies, 2 voices, and was last updated 10 months, 4 weeks ago by Leo.
October 27, 2019 at 3:42 pm #1046258Karen
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!October 27, 2019 at 5:53 pm #1046288LeoStaffCustomer Support
Let me know if this helps 🙂October 27, 2019 at 6:19 pm #1046300Karen
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.October 27, 2019 at 7:33 pm #1046329LeoStaffCustomer Support
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/October 27, 2019 at 8:36 pm #1046357Karen
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!October 28, 2019 at 8:14 am #1046904LeoStaffCustomer Support
Try turning off merge with content for the element:
https://docs.generatepress.com/article/header-element-overview/#merge-with-contentOctober 28, 2019 at 11:26 am #1047102Karen
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.October 28, 2019 at 11:30 am #1047105LeoStaffCustomer Support
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
Let me know 🙂October 28, 2019 at 11:41 am #1047119Karen
That didn’t work either. See result on “home-test” page.October 28, 2019 at 11:58 am #1047130LeoStaffCustomer SupportOctober 28, 2019 at 12:22 pm #1047162Karen
Wow! I believe that is precisely the solution I’ve been searching for!
Thank you so very much for your help!!October 28, 2019 at 12:48 pm #1047175
- You must be logged in to reply to this topic.