Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #691043

    Working on image caption overlays that are set for hover on desktop, wanting to make them always display on mobile and tablet. Following up on these two related posts:
    how to always display on mobile
    how to always display on tablet specifically iPad

    In the second post, your team suggested this quick CSS:
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .av-overlay-on-hover .av-image-caption-overlay {
    opacity: 1;

    If I correctly understand CSS media queries re min-width and max-width, could the setting just be this?
    @media only screen and (max-width: 1024px) {

    Won’t that trigger the always-display-the-caption-overlay command on any screen narrower than 1024px? So it would cover iPads and basically all the smartphones on the planet?

    Because from the way I understand min-width and max-width, this…
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    means the caption-overlay command triggers for screens narrower than 1024px and wider than 768px, but NOT narrower than 768px, so on smartphones, the caption won’t be visible.

    Or am I just completely confused? :-(


    Hey missouriartscouncil,

    you’re right. when using (max-width: 1024px) all devices within this screen sizes are covered. For more information:

    Best regards,



Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Different image caption hover setting for mobile and tablet’ is closed to new replies.