[Resolved] Positioning Issues

Home Forums Support [Resolved] Positioning Issues

Home Forums Support Positioning Issues

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1641466
    Timo de Vries

    Hi guys,

    I am trying to position a button as in the following scrrenshot (current page I am trying to convert to GeneratePress): https://tinyurl.com/y6t6m36s

    I have created an element and that uses the generate_before_main_content hook. Inside I put a container and styled a button to look like the round icon.

    I am struggeling to get it positioned, so that the container the icon sits in doesn’t take any additional height on the page. I tried something like

    .post-info-container {
        z-index: 100;
        position: absolute;
        right: XXXpx;
        top: XXXpx;
    }

    but that doesn’t work for different window sizes.

    Can you help me?

    #1641518
    David
    Staff
    Customer Support

    Hi there,

    Absolute Positioned elements are placed relative to their parent container.

    For example if you were to add a GB Container Block, and it give it an Additional CSS Class of: relative-parent

    Then add this CSS:

    .relative-parent {
        position: relative;
    }

    Then within that container you add your content block with your custom class eg. post-info-container. Your absolute position CSS will now work, as its position will be constrained to the parent container.

    #1641536
    Timo de Vries

    Hi David,

    thanks a lot – that did the trick!

    If anybody else is looking for a solution, I just added
    display: inline;
    to the relative parent, so that it doesn’t take any whitespace in my layout.

    #1641547
    David
    Staff
    Customer Support
    #1641684
    Timo de Vries

    Unfortunately, I had to reopen – it doesn’t seem to work in firefox. Do you have an idea for a cross-browser solution?
    Also I have some gb-buttons and the default button container is set to “align buttons to the right” – in firefox these are centered. Is this a bug?

    #1641702
    David
    Staff
    Customer Support

    The GB Container holding the icon and table has the Full Width option applied to it. Select that Block and from the blocks toolbar deselect that option – its not required as your page is set to full width. Its also the cause of this issue.

    #1641719
    Timo de Vries

    awesome – thanks 🙂

    #1641741
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.