Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #561627

    full screen slider is not being responsive on our site popwhitedental. When we try to view the site on our phone it does not adjust accordingly please help. Initially we thought i was because we were using version 3.3 of the theme but we updated it today and it still does not function properly.

    #561639

    Hey popwhiteadmin!

    try to control it with this code in Quick CSS field:

    @media only screen and (max-width: 989px) {
    .avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
    width: 39%;
    height: 510px;
    }}
    

    and adjust as needed.

    Cheers!
    Andy

    #561667

    I tried using that one but with the width at 39% it was definitely way to small. I made it width 100% and it looks almost the same as before I entered the CSS. The images in the slider just look cut off. Any other suggestions?

    #562201

    bump

    please provide another alternative.

    #562361

    Hi!

    The slider images in the full screen slider is set as background and the background-size properties of those backgrounds are set to “cover” which means that it will cover the entire container but it will cut off parts of the images. This behaviour is intended to keep the aspect ratio of the images. You can set it to “contain” but it will distort most of the images. This works pretty well on many sites but, unfortunately, it doesn’t work well on your selected images so we will suggest that you create an alternate slider specifically for mobile screens. You can do that by adding a new slider, probably a fullwidth slider, on top or below the current slider. Use css media queries to toggle the display of these sliders on different screen sizes. Example:

    @media screen and (max-width: 769px) {.only_desktop { display: none !important; }}
    @media screen and (min-width: 768px) {
    .only_mobile { display: none !important; }}

    You might want to turn on the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Ismael

    #677046

    I tried this but now there is an empty gap where the container expects to show something. The container should be flat empty

    #677670

    Hi @zohar,

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

    Best regards,
    Rikard

    #705408

    I am having the same issue on http://www.chrishudsoncouture.com/new/
    when on mobile and tablet the full screen slider does not scale – you can’t even tell what the images are.
    The h1 font doesn’t scale either…. did I do something wrong?
    Thanks in advance,
    Chris

    #706632

    Hi Chris,

    I would recommend that you create another slider with images better adapted to small screens. You can assign custom CSS classes to all builder elements if you follow this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    You can then hide/show the correct slider using CSS like this:

    @media only screen and (min-width: 768px) {
    .slider-desktop {
      display:block !important;
    }
    .slider-phone {
      display:none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    .slider-desktop {
      display:none !important;
    }
    .slider-phone {
      display:block !important;
    }
    }

    Best regards,
    Rikard

    #706746

    Thank you guys!
    Chris

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘full screen slider not responsive’ is closed to new replies.