Essential Grid Text Overlay positioning issue 2

[Pbalazs89]

Hi there,

I’m curious about the following:

https://www.crkl.hu/water/

At the bottom of this page, I have Essential grid setup, with a text overlay on the leftmost column. The text overflows for some reason though. I can’t make is position based on the size of the box, how would this be achievable?

The site is protected as it is under development, please use the following link and account to access it: secure note

Thanks!

[ruenel]

Hello @Pbalazs89,

Thanks for writing in!

Did you added this custom css?

.eg-vanburentextoverlay-element-0 {
    font-size: 17px;
    line-height: 20px;
    color: #ffffff;
    font-weight: 800;
    display: inline-block;
    float: left;
    clear: both;
    margin: 20px 20px 20px 20px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    background: transparent;
    position: absolute;
    height: auto;
    width: auto;
    top: 0px;
    left: 0px;
    z-index: 2 !important;
    text-transform: uppercase;
}

Please have it updated and use this instead:

.eg-vanburentextoverlay-element-0 {
    font-size: 17px;
    line-height: 20px;
    color: #ffffff;
    font-weight: 800;
    display: inline-block;
    float: left;
    clear: both;
    margin: 20px 20px 20px 20px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    background: transparent;
    position: absolute;
    height: auto;
    width: auto;
    top: 0px;
    left: 0px;
    z-index: 2 !important;
    text-transform: uppercase;
    max-width: calc(100% - 40px);
    word-break: break-word;
}

Please let us know if this works out for you.

[Pbalazs89]

Thanks, that fixed it!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!