Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 11, 2021 at 3:49 am #1324336
    photographie-tous-azimuts

    I am trying to have a promo box with an image on left, text in the middle and button on right. I have placed the code below in the text area of the promo box but it does not behave well on smartphones and tablets. The image overlaps the button and/or resizes very small. How can I achieve that? The Promo Box documentation says «It is a convenience element for something that by now can also be achieved in a more flexible way with column and button shortcode», but I found no way to place a button alongside anything inside a column element.

    <img class="size-full wp-image-22349 alignleft" src="https://www.photographie-tous-azimuts.com/wp-content/uploads/2021/10/Yousuf-Karsh-Einstein.jpg" alt="" width="33%" height="33%">
<h2 style="text-align: left; margin-top: -15px;">Exposition Yousuf Karsh</h2>
<h3>Conférence gratuite <br class="avia-permanent-lb">et visite guidée</h3>
    October 11, 2021 at 3:51 am #1324337
    photographie-tous-azimuts
    This reply has been marked as private.
    October 11, 2021 at 6:38 am #1324361
    Ismael

    Hi,

    Thank you for the inquiry.

    We cannot see any layout issue with the promobox element on mobile view. Would you mind providing a screenshot? The promobox element can be recreated with column and button elements, but you have to manually insert additional html and css.

    Best regards,
    Ismael

    October 11, 2021 at 6:20 pm #1324445
    photographie-tous-azimuts

    Hi Ismael,

    It really depends on the length of the words inside the text vs the size of the window/phone/tablet. If you resize the window on a desktop browser, at some point the button will overlap the text and/or the image. I have added a third promo box with shorter text where the image overlaps the button on an iPhone XR.

    Here is a WeTransfer link showing the behaviour on 3 different window sizes.

    Best regards,
    Serge

    October 12, 2021 at 1:31 pm #1324549
    Yigit

    Hi Serge,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 767px) { 
.responsive .av_promobox .avia-button, .responsive .av_promobox .avia-button-wrap {
    display: inline-block;
}}
@media only screen and (max-width: 990px) {
.avia-promocontent {
    margin-right: 0;
}
.av_promobox .avia-button.avia-size-large {
    margin-top: 0;
}
#top .av_promobox .avia-button {
    position: unset;
}
}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.