Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 26, 2017 at 3:27 am #783213
    jsheetz15

    When using any of the given image sliders, the images I placed in the sliders are getting cut in half and you have to scroll to see the whole image. Is there a way this can be achieved? Thank you

    April 26, 2017 at 6:03 am #783237
    Nikko

    Hey jsheetz15,

    Fullscreen slider covers the whole screen with the image and since the images added are in portrait, that’s why the images is cut since the height is scaled based on the 100% of the image width. Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .page-id-539 #fullscreen_slider_0 ul li {
    background-size: auto 100%;
    background-repeat: no-repeat;
}

    This code is specific on the page you gave and on that slider only. Let us know if this helps :)

    Best regards,
    Nikko

    April 26, 2017 at 10:01 pm #783704
    jsheetz15

    Hi Nikko, I added the css but i m still having to scroll up and down to see the whole image. Ideally I would like to have the image scaled so it can be viewed in whole without having to scroll up and down. Thank you

    April 29, 2017 at 6:35 pm #785065
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .page-id-539 .avia-slideshow li img {
    width: 612px!important; 
    height: 792px!important; 
    height: 90vh!important; 
    height: calc(612/792vh)!important; 
}

    This works to keep the aspect ratio of the image while showing it at 90% of the visual height of the device.
    You can change it to 100%, but the header gets in the way & I thought 90vh looked better :)

    Best regards,
    Mike

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