[Resolved] layout involving a negative margin

[Karen]

Hello,

I am migrating a site to GP from another theme. I have a layout with an image for the main content and a GB container containing a GB grid with which I’ve used a negative top margin to move the container up to overlay part of the image. With this layout when the main content image is an image block, the height of the entry-content div is reduced and the image overlaps the bottom of the container. This is what I want it to do, but when I replace the image block with an image slider, the height of the entry-content div does not change, so I don’t get the overlapping effect that I’m trying to get. I haven’t been able to figure out what I need to change to make it behave the way I want it to.

The private URL field is the page that I’m trying to adjust. “ztest-home2” demonstrates the effect I’m trying to achieve.

Thank you for any assistance you can provide!

[Leo]

Hi there,

Sorry I’m a little bit confused.

/ztest-home1 and /ztest-home2 looks exactly the same to me.

What am I missing or have you already figured out?

[Karen]

Thank you for looking into this, Leo. The difference between the 2 pages still exists but it is a subtle difference. In ztest-home1 the bottom of the image is aligned with the top of the footer. In ztest-home2 the bottom of the image overlaps the top 17px of the footer. I hope this explains it adequately.

I’m viewing on a desktop, and I’ve observed the problem with both Firefox and Chrome.

[Leo]

Hi there

Are you referring to the footer widget overlap with content?

If to try this CSS:

.site-footer {
    margin-top: -20px;
}

[Karen]

Yep, it looks like that is what I was missing… darn, I should have been able to figure that out myself. I guess I became so fixated on getting the height of the entry-content div to change, I missed the more obvious way to make the adjustment. Heaps of thanks for pointing me in the right direction! Y’all are the best!!

[Leo]

No problem 🙂

[Author]

Posts