Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 20, 2014 at 12:11 am #370823
    ewingmh

    When viewing http://www.coloradoadventurerentals.com on a mobile device – the fallback image is not responsive and so the user sees only the bottom left of the image… how do I make the image adjust to the screen size?

    December 20, 2014 at 5:52 am #370911
    Ismael

    Hey ewingmh!

    Thank you for using Enfold.

    Add this css code on the Quick CSS field or custom.css but it may stretch the fallback image:

    .avia-fullscreen-slider .avia-slideshow>ul>li.av-mobile-fallback-image {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
}

    Test different images.

    Cheers!
    Ismael

    December 20, 2014 at 10:47 pm #371063
    ewingmh

    this doesn’t change anything…. what is the point of the fallback image if it’s not responsive by default?

    December 20, 2014 at 10:51 pm #371068
    ewingmh
    This reply has been marked as private.
    December 21, 2014 at 5:26 am #371149
    Josue

    Hey!

    Check it now, i used this code in Quick CSS:

    #top .av-section-mobile-video-disabled {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
max-height: 550px;
}

    Best regards,
    Josue

    December 21, 2014 at 8:13 am #371229
    ewingmh

    close – but looks horrible on a iphone 6… the image stretches…

    December 21, 2014 at 8:32 am #371234
    Josue

    It would be a matter of reducing the height there, try adding this to Quick CSS:

    @media only screen and (max-width: 480px) { 
   #top .av-section-mobile-video-disabled {
       max-height: 220px;
   }
}

    Regards,
    Josue

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