Docs

[NickGuide]

Hi There!

I was wondering if it was possible to change the style of the promo box to having the text on the right, or left of the image instead of directly below the image. In other words to have it horizontal rather than vertical. I can’t seem to figure out a way to do this..

Thanks for any suggestions. I am using the integrity stack

[Lely]

Hi Nick,

Please add custom-promo on the Promo element class field.
Then add the following CSS on Appearance > Customize > Custom > CSS:

.custom-promo .x-promo-image-wrap {
    display: inline-block;
    width: 50%;
}
.custom-promo .x-promo-content {
    display: inline-block;
    width: 50%;
}

Hope this helps.

[NickGuide]

Thanks very much. Is there a way to get the image and text to be level?

[NickGuide]

This reply has been marked as private.

[Zeshan]

Hi Nick,

You’re welcome! 🙂

To show the image and text in the same level, use this CSS code instead:

.custom-promo .x-promo-image-wrap {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding-top: 23px;
}
.custom-promo .x-promo-content {
    display: inline-block;
    width: 50%;
}

Hope this helps. 🙂

Thank you!

[NickGuide]

Like a charm. Thanks again for the great support as usual

[Thai]

You’re very welcome 🙂

If you need anything else, please let us know.

[Author]

Posts