Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 13, 2017 at 11:37 am #838204
    yes9310

    Hi,

    I’m having a problem with the Full Width Easy slider keeping the images all the same height. AT first the arrow controls were jumping up and down and I wanted to remove the dots, so I used the following css to fix that problem. However, all of the images are 819 Height but some are widths like 1638 x 819, others 1229 x 819. The arrows stay fixed now, but the ones that have smaller width appear taller when the slides display. Is there any way to make them all appear the same height with different widths?

    This CSS keeps the arrows from jumping up and down and to remove dots, but the images still appear taller and shorter due to different widths, but they are all the same height 819px. See link below. Thanks.

    }
    .avia-slideshow-inner {
    height: 819px !important;
    }
    .avia-slideshow-dots.avia-slideshow-controls {display:none;}

    August 13, 2017 at 9:46 pm #838343
    Nikko

    Hey yes9310,

    Can you try adding this css code in Quick CSS:

    .av_slideshow_full li img {
    width: auto !important;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    August 13, 2017 at 10:15 pm #838355
    yes9310

    Thanks Nikko. I added that css and cleared the cache, but it did not work. I also noticed that with this added css, it makes some images stretch the full width while putting a lot of whitespace on the left and right side of others as well as the height keeps changing. I have it set to Stretch images and tried “No Scaling Original width and height and all the other settings 1030×1030, 1500×1500, etc. Any other ideas?

    August 14, 2017 at 3:52 am #838416
    Nikko

    Hi,

    Stretching images that have less than the width of the screen would also force the image to stretch the height of the image so it’s still proportional, I think you can add this css code so it would hide the excess of the image (bottom part):

    .avia-slideshow-inner {
    overflow: hidden !important;
}

    Let us know if this helps. :)

    Best regards,
    Nikko

    August 14, 2017 at 4:36 pm #838755
    yes9310

    Thanks Nikko! It seems to help some on PC view. I’m trying to keep all the images as close as possible to 1300 x 732, but some are less than 1300 wide on the single horizontal pics to maintain aspect ratio. However on mobile, all of the sizes still keep changing and the arrows are not visible. Is there anything I can add for mobile to make the arrows appear and to obey these css rules?

    August 14, 2017 at 5:16 pm #838802
    Nikko

    Hi,

    Can you try adding this css code in Quick CSS:

    
@media only screen and (max-width:767px) {
  #top .avia-slideshow-inner {
    height: 375px !important;
  }
}

@media only screen and (max-width:479px) {
  #top .avia-slideshow-inner {
    height: 210px !important;
  }
}

    Let us know if this helps :)

    Best regards,
    Nikko

    August 14, 2017 at 6:33 pm #838866
    yes9310

    Thanks Nikko! I see the arrows now and it seems to constrain the images at a certain height, but on some that are wider, it shortens them and puts a white space and a gray line below the space. I changed the border from gray to white and the line disappeared. Just wish it would keep them all the same height.

    August 14, 2017 at 7:14 pm #838885
    Nikko

    Hi,

    Try to modify the heights I have set in the code I gave, hope it helps :)

    Best regards,
    Nikko

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