Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 5, 2016 at 5:39 am #627605
    ShortieD

    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

    Home

    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;}
    }

    May 5, 2016 at 12:49 pm #627760
    Yigit

    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

    May 9, 2016 at 1:43 am #628941
    ShortieD

    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;}
    }

    May 10, 2016 at 1:04 pm #629866
    Yigit

    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

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