Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 9, 2016 at 8:21 am #670192
    gerardbao

    Following up on this post.
    https://kriesi.at/support/topic/different-image-caption-hover-setting-for-mobile/

    Same deal, accept I want to apply this style to tablet as well.
    The original recommendation for mobile was:
    @media only screen and (max-width: 767px) {
    .av-overlay-on-hover .av-image-caption-overlay {
    opacity: 1;
    }
    }

    I increased the max-width to 769px, but it still doesn’t display the caption on iPad.

    August 10, 2016 at 6:18 am #670634
    Rikard

    Hey gerardbao,

    Please try this instead: 

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.av-overlay-on-hover .av-image-caption-overlay {
opacity: 1;
}
}

    Best regards,
    Rikard

    August 10, 2016 at 8:50 am #670693
    gerardbao

    That helped. But now the hover caption text bleeds outside the box. How can create a special class for this specific set of text?
    To make the text fit within the box for tablet, it needs to be this style.
    .quote_home {
    font-size: 13px;
    line-height: 1.7em;
    }

    The font already looks fine as is on mobile.

    August 13, 2016 at 3:46 am #672156
    Ismael

    Hi,

    Add a unique class attribute to the columns or the image element inside. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    August 16, 2016 at 1:00 am #672918
    gerardbao

    Got it working. Thanks!

    August 17, 2016 at 5:44 am #673489
    Rikard

    Hi,

    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Image caption setting for tablet’ is closed to new replies.