Issues with Slider on smartphones

The problem with web based tools is they never 100% represent the device and can only be used as a rough test. The fix I submitted works great with iOS6 + iOS7 (and legacy IE). I’ll check on Android later but I’d be surprised to see it fail.

I’d recommend picking a cheap iOS device from eBay if you want to test mobile support.

Thanks, could I be cheeky and ask if the codes I’ve just added to get the featured areas’ picture sit in the middle of the boxes have worked?

No, they’re offset to the upper left. I’ve uploaded a screenshot

Bleugh! That’s mad since it’s sorted it on my Android.

I’ve got another thread opened for that.

I’ll post the codes see if anyone can find the issue…

Thanks for all the help and patience!
It’s my first WP site and I’d never heard of CSS before a month or so ago so it’s all very new! ??

@electricfeet

Just checked your site and the CSS changes are not present. Where did you put them?

@gscohier

in the child stylesheet css.
is that not where they need to go?

I should have been more explicit. I checked inside the currently-active CSS file, which is here, and there is no carousel-caption styling in there at all. Did you remember to upload it? Is it uploaded to the right place?

@electricfeet check the file again, you’ll find gscohier applied the fix I supplied and there is carousel-caption styling there now.

Yup, it’s now working.

However, of all the code above, the only bit that matters is the position: relative; line, which corrects the incorrect value given in the blue.css around line 8203–and which is only valid for media < 480px.

So yes, now that the code above has been inserted it will work, but it’s all repetition. All the repetitions will need checking for changes every time the theme is updated (just in case any of it is changed in order to fix other problems).

You might want to check that ElectricFeet. My fix does not include that and works fine without it.

Ahh, I see what you are saying. The missing position: relative breaks things in the latest version…..

So a complete end-to-end fix would be to add this to custom CSS:

.carousel-inner > .active {
/* Fix slider in IE */
z-index: 9;
}

.carousel-caption {
/* fix for IE to align the grey box to center */
top: 25%;
position: relative;
}