Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 26, 2018 at 1:20 pm #1014710
    aussiedropbear

    Hi,

    I have been messing around with settings but can’t seem to have this working how I think it should work.

    Essentailly, the full width easy slider on mobile view is presently cutting off the sides of the images on the home page. I know I can control the slider minimum height for smaller screens but this only gets me so far.

    The slider on the ‘home designer’ page shows its images without using the slider minimum height for smaller screens, which shows the full image width but stretched in height.

    Is it possible to have the full image width diplayed on mobile view in a correct image ratio to how it is viewed on larger screens (height/width)? I could then control the slider height from the function in the slider if need be.

    Thanks
    John

    September 26, 2018 at 4:17 pm #1014835
    Victoria

    Hey John,

    You can try this code:

    
@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: 240px !important;

  }
  #full_slider_1 .avia-slideshow li img {
    max-width: auto;
}
}

    But the images used have the landscape aspect ratio and so shown on a small screen cannot really be fit perfectly in the portrait mode.

    Best regards,
    Victoria

    September 27, 2018 at 12:20 am #1015032
    aussiedropbear

    Thanks Victoria.

    Ive tried the code with and without the easy slider adjustment but cannot get my mobile to show the refreshed image. Ive even cleared the cache several times as well.

    What do you recommend then for an image size that will work like it is in desktop view but also in mobile etc.? I presently have the images set to 1500×430.

    Thanks
    John

    September 27, 2018 at 2:12 am #1015059
    aussiedropbear

    Hi Victoria,

    Just a further update. I have it working now but not by the modified code. All I have done is duplicated the easy slider and applied the element visibility according to the slider.

    So in the case of the mobile slider I am hiding all but the mobile (Hide on very small screens (smaller than 479px – eg: Smartphone Portrait) and modified the settings for the ‘sldieshow image and video size’ to be:

    – No scaling (original width X original height)
    – No, don’t stretch the image. If the browser is bigger than the image simply align it centered

    However, if you think we can do this by CSS I’d be happy to try it out :)

    Many thanks
    John

    September 27, 2018 at 3:09 pm #1015319
    Victoria

    Hi John,

    Well, this is one way to deal with the issue.

    It looks ok, but I still think the min-height should be bigger.

    Best regards,
    Victoria

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