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

    I’m using the Full Width Easy Slider on the home page of a website and I want to specify a height in the media quires so the photos in the slider aren’t so small when you view it on a smaller screen. I added:

    .avia-slideshow-inner {
        height: 345px !important;
    }

    That makes the area where the slider is displayed the height I want, but there is white space under the photos in the slider. So I added:

    .avia-slideshow-inner img {
        height: 345px !important;
    }

    That fills the areas, but it stretches the image vertically. Is there a way to specify the height of the slider and images in it, but allow them to scale so they keep their proportions? Thanks!

    #660803

    Hey NicomIT,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    #660817

    Sure, here you go…

    #661963

    Just wondering if anyone had a chance to look into this. Thanks!

    #662045

    Hi,

    add a width value into your existing code:

    @media only screen and (max-width: 1024px) {
    .avia-slideshow-inner img {
    width: 200% !important;
    max-width: 200%;
    }}
    

    and adjust as needed.

    Best regards,
    Andy

    #662067

    Thanks Andy. I gave that a try, but it still didn’t look quite right. So changed it back without ant media quires and the slider is resizing using the default options now. I think that looks better. But I’d like to hide the slider and show a single background image when you get down below 758px. I have a background there now. But can’t seem to hide just the slider and display the background in the same area. Is that possible to do?

    #662114

    Hi,

    you could do this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then build one element for which you hide on desktop only and vice versa. For example:

    .hide-on-desktop {
    display: none;
    }
    

    Use “hide-on-desktop” as custom class.

    Best regards,
    Andy

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