Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #627605

    Hi there – I’m using the image captions that are overlayed on images using the Avia layout builder…see the ‘services’ ‘products’ and ‘book online’ tiles at the bottom of the page

    However when the site drops down to under 857px wide – these captions stay the same size and get cut off…

    I’ve tried addinga media query below – but this didn’t work – can you please let me know what I need to do to fix this? thanks

    MEDIA QUERY

    @media only screen and (min-width: 300px) and (max-width: 857px) {
    .av-image-caption-overlay {font-size: 16px !important;}
    }

    #627760

    Hey ShortieD!

    Please try using following code instead

    @media only screen and (max-width: 857px) {
    .av-image-caption-overlay-center {
        font-size: 16px!important;
    }}

    Best regards,
    Yigit

    #628941

    Thanks Yigit – I also put in an extra media query for the the smaller screens as this still cut the text off on iphone landscape view

    @media only screen and (max-width: 460px) {
    .av-image-caption-overlay-center {font-size: 12px!important; padding-left:15px !important;}
    }

    #629866

    Hi,

    Great! Glad you figured it out!
    Using the code as following should work better though

    @media only screen and (max-width: 480px) {
    .av-image-caption-overlay-center {font-size: 12px!important; padding-left:15px !important;}
    }

    Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Make image overlay captions responsive’ is closed to new replies.