Slider resolution/z axis on iPhone

Support Area Forums Mise En Place Slider resolution/z axis on iPhone

This topic contains 2 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://brasseriebrightwell.com
  • Author
    Posts
  • #35435

    Joel Shilliday
    Participant

    First, love the site.
    Having a couple slider issues though…
    On my iphone the slider on the homepage doesn’t render completely. And also there seems to be a z axis issue with the slider the menu, and dropdowns (when on ipad) want to flow behind the slider and not over top. Links to screen shots from phone below. Any guidance is appreciated.

    https://www.dropbox.com/s/hr8p8p8zuulvkj6/IMG_5206.png?dl=0

    https://www.dropbox.com/s/1f7p016amkwy5yc/IMG_6355.png?dl=0

    Thanks,
    Joel

    #35440

    Bill Robbins
    Keymaster

    Hi Joel,

    Thank you for your business. Sorry for the trouble there. Let’s do this. Go to the Customizer and click on the Advanced tab. In the Custom CSS spot, add this to the box there:

    
    #mobile-panel { z-index: 200; }
    .sow-slider-base ul.sow-slider-images { z-index: 2; }
    

    and update your settings. See if that won’t keep the menus on top of the slider.

    When you say the slider doesn’t render completely on your phone, which part of it is missing? Comparing what it looks like on my Mac to my iPhone and your screenshot I’m not spotting it. If you wouldn’t mind pointing me in the right direction there that would be great.

    If you run into trouble, let me know.

    Thanks,
    Bill

    #35446

    Bill Robbins
    Keymaster

    I believe you can hide the gray background with this CSS:

    
    .sow-slider-image.cycle-slide[style] {
        background: none !important;
    }
    

    I’ve attached a screenshot of what I’m seeing on my iPhone. It doesn’t look as pixelated as the one in your screenshot. It’s really hard to read though since it’s so small.

    You might look at creating two sliders there; one for larger and one for small displays. You could then add different CSS classes to each of them and hide/show them based with a media query. That way you could create just what each screen size needs.

    That might give you the best results and skip on the pixelation too.

    • This reply was modified 1 year, 7 months ago by  Bill Robbins.
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Slider resolution/z axis on iPhone’ is closed to new replies.