Docs

[thaiunderdog]

I’ve used this code for putting floating element in center position between 2 content band

#crown .x-column {
position: absolute;
background-color: transparent !important;
padding: 100px !important;
top: -180px;
z-index: 1000;
max-width: 650px;
left: 25.95%;
height: 500px;
}

btw left: 25.95%; is only worked on my laptop screen. Any idea to make it stay center between 2 content band on all screen sizes ?

[Rupok]

Hi there,

Thanks for writing in! Absolute positioning is never responsive for all devices. If you can provide your URL and a screenshot of what you are trying to achieve then we might be able to give you some suggestion.

Cheers!

[thaiunderdog]

Sorry for late reply, here is my site url : http://nsm1.com

and “Choose your own king” image in the center is the floating element

[Rupok]

Hi there,

Thanks for writing back. Let’s update your code to following :

#crown .x-column {
    position: absolute;
    background-color: transparent !important;
    padding: 100px !important;
    top: -180px;
    z-index: 1000;
    max-width: 650px;
    left: calc(50% - 325px);
    height: 500px;
}

Hope this helps.

[thaiunderdog]

Thanks for your support. Btw I just find easier method by changing floating element to section’s background image.

[Lely]

You’re welcome!

Cheers!

[Author]

Posts