[Resolved] Positioning Issues

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

Glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Timo de Vries]

awesome – thanks 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts