Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 8, 2016 at 12:03 am #561627
    popwhiteadmin

    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.

    January 8, 2016 at 12:13 am #561639
    Andy

    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

    January 8, 2016 at 12:36 am #561667
    popwhiteadmin

    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?

    January 8, 2016 at 9:33 pm #562201
    popwhiteadmin

    bump

    please provide another alternative.

    January 9, 2016 at 8:30 am #562361
    Ismael

    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

    August 24, 2016 at 3:41 pm #677046
    zohar

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

    August 25, 2016 at 5:05 pm #677670
    Rikard

    Hi @zohar,

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

    Best regards,
    Rikard

    October 28, 2016 at 8:16 pm #705408
    madisonstudios1

    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

    November 1, 2016 at 10:11 am #706632
    Rikard

    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

    November 1, 2016 at 3:15 pm #706746
    madisonstudios1

    Thank you guys!
    Chris

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘full screen slider not responsive’ is closed to new replies.