Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #370823

    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?

    #370911

    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

    #371063

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

    #371068
    This reply has been marked as private.
    #371149

    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

    #371229

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

    #371234

    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

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