[Resolved] remove padding in 1 part of site-content

[Karen]

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!

[Leo]

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 🙂

[Karen]

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.

[Leo]

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/

[Karen]

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!

[Leo]

Try turning off merge with content for the element:
https://docs.generatepress.com/article/header-element-overview/#merge-with-content

[Karen]

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.

[Leo]

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_content hook:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know 🙂

[Karen]

That didn’t work either. See result on “home-test” page.

[Leo]

Hmm try this:
https://www.screencast.com/t/QZqCeILQxNJC

[Karen]

Wow! I believe that is precisely the solution I’ve been searching for!

Thank you so very much for your help!!

[Leo]

No problem 🙂

[Author]

Posts