[Resolved] Top-Margin blocked

[Timo de Vries]

Hi guys,
I am trying for some time now but can’t figure it out. I have attached 2 links for you to see.

Link1 is the layout I would like to achieve: I have one outer container and one inner container with the classes “card pagehead” assigned. “pagehead” moves the content up for 65px.

Link2 has the same structure and classes with a further grid inside. Somehow the 65px are blocked and the container only moves up like 26px.

For Link2 please activate the “Exportansicht” toggle on the bottom of the page to see the container. The container you see before (shortcode output from a plugin) has the correct margin-top.

Can you help me?

[David]

Hi there,

you would have to use relative positioning to overcome that ie.

.pagehead {
    top: -65px;
    display: inline-block;
    width: 100%;
    position: relative;
}

You would then need some negative top margin on the site-content to close the gap between those elements.

[Timo de Vries]

Thanks, David! – that did the trick.

I just added a negative margin to the same element instead of the site-content, to not mess up the layout before using the toggle:

.pagehead {
    top: -65px;
    display: inline-block;
    width: 100%;
    position: relative;
    margin-bottom: -5rem;
}

[David]

Glad to hear that

[Author]

Posts