Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 24, 2014 at 2:04 am #269384
    Jennifer

    I want to replace the slider image (.avia-slide-wrap) when the browser reaches mobile size (i.e. @media only screen and (max-width: 600px) ). Is there a way to do this, through CSS or PHP?

    Here is the site link:
    http://danvillehotelresidences.com/

    Thanks for your help,
    Jennifer

    May 24, 2014 at 11:47 pm #269590
    Josue

    Hey Jennifer!

    Put a Color Section (with the desired image) on top of the slider with an ID of #mobileimg, then add this to the Quick CSS:

    @media only screen and (min-width: 768px) {
#mobileimg{
display: none;
}
}

@media only screen and (max-width: 767px) {
#full_slider_1{
display: none;
}
#mobileimg{
display: block;
}
}

    Best regards,
    Josue

    May 27, 2014 at 5:58 am #270400
    Jennifer

    Hi Josue,

    I think we’re almost there. The problem I’m now having is that the color section won’t display the full height of the background image. I tried setting the #mobileimg and the .avia-section height to 100%, but neither did the trick.

    Here is the new test page link:
    http://danvillehotelresidences.com/test

    Thanks again,
    Jennifer

    May 27, 2014 at 6:00 pm #270646
    Josue

    Hi Jennifer!

    Try adding this to the Quick CSS:

    div#mobileimg {
    height: 410px;
}

    Cheers!
    Josue

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