Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 21, 2015 at 9:57 pm #432408
    rbruski

    I have a fullscreen slider that isn’t rendering correctly in the iphone when it is in portrait mode. Then phone is turned to landscape mode then it looks fine. Is there something wrong with the image or the way it is configured. The website is http://www.bruskiturski.com

    Thanks for the help

    Robert

    April 23, 2015 at 2:29 pm #433481
    Yigit

    Hey rbruski!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
#fullscreen_slider_0 li { background-size: contain !important; }}

    Best regards,
    Yigit

    April 23, 2015 at 5:27 pm #433629
    rbruski

    Thanks for this.
    It actually sort of worked. The image fits now, however it is repeat three time in portrait mode to fill the whole screen rather than just being there once and continuing on with the next content below it.

    Robert

    April 24, 2015 at 6:05 pm #434301
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    April 24, 2015 at 6:27 pm #434324
    rbruski

    Yigit,

    I’ve added that code but nothing seems to have changed.
    What i currently have in the Quick CSS box is:

    @media only screen and (max-width: 480px) {
    #fullscreen_slider_0 li { background-size: contain !important; }}

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

    Robert

    April 24, 2015 at 6:28 pm #434325
    Yigit

    Hi!

    Can you please try adding !important rule as following 

    @media only screen and (max-width: 480px) {
.avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
  height: 167px !important ;
}}

    Best regards,
    Yigit

    April 24, 2015 at 6:34 pm #434331
    rbruski

    Yigit,

    So i’ve made that change and it’s a little better but still not perfect. In portrait mode, the image no longer doesn’t repeat vertically, but it looks like it doesn’t stretch horizontally and repeats horizontally. In landscape mode everything still seems to be good.

    Any thoughts?

    Robert

    April 25, 2015 at 4:52 am #434569
    Ismael

    Hi!

    Sometimes a single image dimension isn’t enough to cover all devices’s screen sizes. Maybe, you need to create another slider specifically made for mobile devices. Refer to these links for more info:

    http://stackoverflow.com/questions/11796297/div-show-hide-media-query
    https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
    https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/
    https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
    https://kriesi.at/support/topic/replace-slider-on-mobile/

    You can turn on the custom css class attribute to help you differentiate two sliders: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Cheers!
    Ismael

    • This reply was modified 9 years, 7 months ago by Ismael.
    April 26, 2015 at 7:35 pm #434903
    rbruski

    is there anyway to insert some code that will scale the image up or down to fit any device, whether in landscape or portrait mode, except for a computer where it will stay a fullscreen slider?

    Robert

    April 27, 2015 at 7:32 am #435058
    Ismael

    Hey!

    What if you replace the code with this?

    @media only screen and (max-width: 480px) {
#fullscreen_slider_0 li {
  background-size: 100% !important;
  background-repeat: no-repeat;
}}

    It will distort the image a bit.

    Cheers!
    Ismael

    April 27, 2015 at 4:34 pm #435385
    rbruski

    This is working much better. The only thing now is that there is big gap between the main slider and the next content in portrait mode. Should i have kept part of the other code that went up?

    Robert

    April 28, 2015 at 9:50 am #435874
    Ismael

    Hi!

    Add the previous code inside the media query:

    .avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
  height: 200px !important;
}

    Best regards,
    Ismael

    April 28, 2015 at 6:02 pm #436246
    rbruski

    This is perfect.
    Everything works now.

    Thank you

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Iphone Rendering’ is closed to new replies.