Overlay centering - Forum | JoomShaper
Solved SP Page Builder

Overlay centering

Asked by Thomas Deliduka 4 years ago Last activity 4 years ago

On our website: https://www.stpatrickcolumbus.org/

I've got text that is overlayed on top of the image. In order to get it in that position, I chose Advanced -> Enable Custom Position
I then set it to Absolute positioning and I set the height.

But in order to center it, I had to go to Style and set a left/right margin. Because anything else doesn't seem to work.

I tried setting the X axis on Absolute to 50% but that just starts it at the halfway point. Setting it to 25% doesn't seem to work. I tried -50% and it was clear off the page.

How can I get an item that is overlayed on top of something to center on the page? Because right now the margin thing isn't really working. It looks pretty bad in some cases.

Accepted answer

Marked as the solution
Pavel
4 years ago

Hi. Unfortunately, there are no settings for this. This can be done only through CSS. Disable all the settings that you tried to do for this and use the following code.

#sppb-addon-wrapper-1585855657007 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2 more replies

Oldest first Newest first Most helpful
Thomas Deliduka Asked this
4 years ago

Thanks, I couldn't put the custom CSS into the element itself. I had to go to the template and add it to the global custom CSS. After doing that, it worked fine. I made some slight modifications for my needs but that works.

Thanks!

Mehtaz Afsana Borsha Staff
4 years ago

Hi

Glad to know that this issue is fixed. Thanks Pavel

-Regards

Log in to reply.