[Resolved] Top-Margin blocked

Home Forums Support [Resolved] Top-Margin blocked

Home Forums Support Top-Margin blocked

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1645258
    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?

    #1645904
    David
    Staff
    Customer Support

    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.

    #1645942
    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;
    }
    #1646632
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.