Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 16, 2019 at 9:47 pm #1054755
    kjwaggz

    Hi there,

    Would you be able to help out with some CSS to make my mobile fallback image the same height on mobile as the other 2 images? I’m using a fullwidth easy slider with the first slide having a fallback image. It doesn’t seem to matter what size the image is, it cuts it off.

    The site is – http://wrightchoice.hosting2.spectora.com/

    January 18, 2019 at 6:02 pm #1055554
    Victoria

    Hey kjwaggz,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:767px){
    li.slide-1 .avia-slide-wrap {
        min-height: 500px;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 26, 2019 at 3:00 am #1058978
    kjwaggz

    Hmm, didn’t seem to take. I’m viewing on an iphone X if that helps.

    January 26, 2019 at 5:43 pm #1059201
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    January 30, 2019 at 8:03 pm #1060594
    kjwaggz

    Hi there,

    I added it to the top of quick css and cleared cache many times over a couple of days, still no luck. Appears shorter on chrome mobile and safari mobile shows 2 different images. Here is a quick video to show what I’m trying to accomplish. Any help would be appreciated since this is the last piece before launching for client!

    Chrome mobile:

    Weird double image on Safari mobile -> https://cl.ly/3a87458f1441

    February 9, 2019 at 8:31 pm #1064976
    Mike

    Hi,
    Sorry for the late reply, I took a look at your site’s mobile fallback image and adjusted the css to:

    @media only screen and (max-width:1000px) {
#top.home [data-rel=slideshow-1] img {
    height: 500px !important;
    min-height: 500px !important; 
    background-repeat: no-repeat !important;
    background-size: 375px !important; 
}
}

    I also noted that your image looked a little off for mobile, so I cropped it a little and uploaded a new version, Please clear your browser cache and check.

    Best regards,
    Mike

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