Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 15, 2018 at 4:46 am #997409
    Angeladlh

    Hi,
    The image for my Fullwidth Easy Slider is to tall enough, when displayed on a mobile device. Could you please tell me how to increase height.
    Many responses have been given for this problem on other threads. I have tried the solutions (ie.CSS code) that have been given but it has not worked for me, so far. Your help would be appreciated.
    Thanks,
    Angela

    August 15, 2018 at 6:39 am #997446
    Rikard

    Hey Angeladlh,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 24, 2018 at 7:40 am #1001050
    Angeladlh
    This reply has been marked as private.
    August 24, 2018 at 1:40 pm #1001208
    Victoria

    Hi Angeladlh,

    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) {
  #full_slider_1, 
  #full_slider_1 .av_slideshow_full.avia-slideshow,
  #full_slider_1  .avia-slideshow-inner,
  #full_slider_1 .avia-slideshow li,
  #full_slider_1 .avia-slideshow li img {
    min-height: 200px;
  }
  #full_slider_1 .avia-slideshow li img {
    width: 220%;
  }
  .responsive.html_mobile_menu_tablet.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
      padding-top: 170px;
  }
}

@media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive.html_mobile_menu_tablet.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
      padding-top: 170px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 3, 2020 at 12:29 am #1264589
    bemodesign

    This code did increase the height of the image so that all the content fit, But now the image is stretched and distorted. Is there a way to just zoom on the photo instead of a stretch?

    December 3, 2020 at 8:11 pm #1264852
    Victoria

    Hi bemodesign,

    You can try playing with the width value here and see if you can find the one that works for you:

    
  #full_slider_1 .avia-slideshow li img {
    width: 220%;
  }

    Best regards,
    Victoria

    August 8, 2021 at 7:52 pm #1315137
    Micha66

    Solution in 2021:

    @media only screen and (max-width: 768px) {
.avia-fullscreen-slider .avia-slideshow {
max-height: 30vh!important;
}}
    August 10, 2021 at 5:01 am #1315927
    Rikard

    Hi Micha66,

    Thanks for sharing your solution, it’s much appreciated :-)

    Best regards,
    Rikard

    February 14, 2022 at 11:57 am #1340461
    Ben

    Hello!

    What’s the current solution for this with Enfold 4.8.9? I’ve tried a few different solutions posted in the forum but I can see to get any of them to work.

    Many thanks in advance,

    February 15, 2022 at 3:31 am #1340620
    Rikard

    Hi Ben,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.avia-fullwidth-slider ul.avia-slideshow-inner {
    height: 219px !important;
}
}

    Best regards,
    Rikard

    February 15, 2022 at 12:56 pm #1340682
    Ben

    Thanks, Rikard, your guys are so very helpful. :-)

    February 16, 2022 at 5:51 am #1340831
    Ismael

    Hi,

    You are welcome! Please let us know if you need anything else. We will close this thread for now.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘fullwidth easy slider change height of image for mobile’ is closed to new replies.