Docs

[irisdigitalservices]

Hi,

I’ve been trying to contain the text (x-feature-box-text) of a feature box used on a rev slider slide; to a certain width (say 100px).

I’m using the following shortcode:

<a class="myFeatureBoxIM" href="/imported-marble/" style="color:white">[x_feature_box title="Imported Marble" title_color="" text="We specialise in sourcing and handpicking marble from the best quarries in the world and transforming the raw blocks into stunning finished products." text_color="" text_aligh="justify" graphic="icon" graphic_size="100px" graphic_shape="circle" graphic_color="#EF7F1A" graphic_bg_color="transparent" graphic_animation=”fadeIn” align_h="center" align_v="top" side_graphic_spacing="20px" max_width="" graphic_icon="bars"]</a>

And the following custom CSS:

.myFeatureBoxIM .x-feature-box-text {
    display:block;
    word-wrap: break-word;
    width:100px;
}

.myFeatureBoxIM i {
    border: 3px solid #EF7F1A;
}

.myFeatureBoxIM:hover i {
    border: 3px solid #EF7F1A !important;
    color: #EF7F1A !important;
    background-color: transparent !important;
transition: all 1s ease-in-out;
}

But its not working (please see attached screenshot) the text is still being displayed in a single line which runs out of the screen.

Please help

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[irisdigitalservices]

This reply has been marked as private.

[Rad]

Hi there,

Tried it and it’s not working. You should add HTML content instead of the shortcode. It’s because layer works with absolute positioning and adding custom size and position against responsive slider isn’t working properly/

Thanks!

[irisdigitalservices]

Thanks Rad!

[Christian]

You’re welcome.

[Author]

Posts