[Resolved] Strange CSS issue

[Rui]

Hi there!

I am facing a problem that appears to be a stylesheet conflict. But I can’t solve it.

I’m trying to get this effect: https://www.zenite.nu/test2.htm
But when I put it inside WP, the effect doesn’t appear: https://www.zenite.nu/test/

The stylesheet is strictly the same (and I´m using selectors precisely to avoid conflicts with native CSS). Any clue where the problem might be?

My site uses WordPress 5.4–pt_BR and GP 2.4.2 Premium.

[David]

Hi there,

try adding this CSS:

#page {
    position: relative;
    z-index: 0;
}

[Rui]

Wow! it worked like magic!

Without abusing your goodwill, but how do I move the rectangle higher, closer the header menu?

[David]

Theres the Customizer > Layout > Container –> Padding that could be reduced.

If you wanted to reduce that only on that page you could use this CSS:

.page-id-31573.one-container .site-content {
    padding: 20px 20px 20px 20px;
}

/* Mobile */
@media (max-width: 768px) {
    .page-id-31573.one-container .site-content {
        padding: 10px 10px 10px 10px;
    }
}

[Rui]

Thanks David!
Consider issue resolved and lesson learned!

And for who else this topic can be useful, in case of posts just replace .page-id- for .postid-

[David]

Glad to be of help.

[Author]

Posts