[Resolved] Page Header & Content slides behind Sidebar

[mdgallagherdesign]

http://cateringwebdesign.com/newtilestest/restaurant

Is there a way to fix this issue I am having. The page header is lining up behind the sidebar, I want it to have the same effect as the current site (http://citizen7.net) We are transitioning everything over to GP.

Also, currently the home page http://cateringwebdesign.com/newtilestest is using an Envira Gallery for the 6 main tiles, we want to eliminate this all together because the links keep disappearing and I figure this is not good practice. I do have Site Origin Premium, not sure if that’s a good resource to rebuild that section or if you suggest something else? We want the tiles to be responsive and resize like they do on the current site.

TIA! I am very beginner at all this!

[Tom]

Hi there,

First, remove this CSS:

.footer-widgets {
    padding-left: 250px;
}

Then add this CSS:

@media (min-width: 780px) {
    body {
        padding-left: 250px
    }

    .content-area {
        left: 0;
    }
}

Envira is quite popular – maybe bring it up with their support? I’m not sure if Site Origin has something similar, but they’re definitely worth checking out 🙂

[mdgallagherdesign]

You are the greatest thing since sliced bread Tom! I am going to keep poking around with this. Good call on the Envira thing, this just started happening with the latest updates so maybe it’s just a glitch.

I’m sure I will have more issues as a move along 🙂 but this worked fantastically.

[mdgallagherdesign]

actually I spoke to soon! (you are still great though!) now the content isn’t centered under the header. See the tiles on the main page don’t span full width, same with the text under the Restaurant tile. I’ve checked my padding in the layout function and tried both full width and default under page builder.

http://cateringwebdesign.com/newtilestest

[mdgallagherdesign]

I fixed it with:

.content-area {
left: 0;
width: 100%;
}

If this is a bad idea let me know.

[mdgallagherdesign]

http://cateringwebdesign.com/newtilestest/restaurant

I have this set to one container, if I change it to separate it screws up the home page. How do I get the text to move down from the page header. I tried padding in the page header but that was no help. Also I have to add padding left and right to all these other pages, but not the home page. When I adjusted it the tiles on the home page moved. I changed it to contained in page builder for the home page and that didn’t work either.

[Tom]

That CSS should have been in the original CSS I gave you – or did you find giving it width: 100% was the fix?

As for the padding, you can:

1. Set the page builder container metabox to “Default”.
2. Add padding in Customize > Layout > Container

Let me know 🙂

[mdgallagherdesign]

No, that doesn’t work. I think I may have told you the wrong thing. Bear with me.

So this is going to be the new home page. Everything is perfect on this page.

http://cateringwebdesign.com/newtilestest/new-home

But the rest of the pages will have content on them like this page:

http://cateringwebdesign.com/newtilestest/catering-2-2

When you adjust the window the form towards the bottom is flush to the right and left.

I am also building the content on these pages with sections now. So I guess the appropriate question is if there is a way to add padding to a specific section?

[mdgallagherdesign]

I did some digging and found the answer Here from a previous thread on here. I have spent a lot of time on google today 😉

Thanks for all your help!

[Tom]

Glad you found a solution! 🙂

[Author]

Posts