Slider resolution/z axis on iPhone

[Joel Shilliday]

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

[Bill Robbins]

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

[Bill Robbins]

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.

[Author]

Posts