Issues with Slider on smartphones

This might help?
https://www.ads-software.com/support/topic/slider-on-iphones

I’ve submitted a patch which will fix both the smartphone issue and makes the sliders work as expected on older IE browsers. You can view it on githhub or wait for it to be merged into the main branch

Thanks, rdellconsulting, I tried the code posted by EF but it didn’t work….

@media (max-width: 480px) {
.carousel-caption {
position: relative;
}
}

The code isn’t in your child style sheet and doesn’t appear to be loading anywhere. Where are you entering it?

No, I took it out since it didn’t resolve the issue.
No point having coding in there that doesn’t work. ??

I’ll put it back if you like so you can see for yourself.

Why not just apply the fix I provided? Not only does it fix smartphones but also fixes legacy IE browser support. You should be able to add it to the custom CSS section of the theme or just replace/update the CSS files of the theme with the fixed ones.

Sorry to sound silly but I can’t find the fix on the page you posted.
Where is it?
All I can see is 3 comments but no codes.

Do I just add the following to the stylesheet?
“Added z-index to active slide to fix slides falling below each other on
transition

Added ‘top: 25%’ to center align slide caption on older versions of IE”

You’re on the discussion tab, click on the ‘files changed’ tab to see the changes. From there you can also see the entire file which you can copy + paste.

Gosh! Sorry! I see!

I’ve done it but it’s still the same…
https://quirktools.com/screenfly/#u=http%3A//social-be.be&w=320&h=480&a=33&s=1

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

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

Sorry, my mistake.

You’ve copied across the changelog formatting as well as the code.

update your css to look like this:

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

and

.carousel-caption {
background-color: transparent\9;
/* IE8 and below */
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#33000000′, endColorstr=’#33000000′, GradientType=0);
/* IE6-9 */
max-width: 60%;
padding: 5%;
line-height: 14px;
vertical-align: middle;
/* fix for IE to align the grey box to center */
top: 25%;
display: inline-block;
position: relative;
margin-left: 11%;
/*display:inline; IE7 and below */

}

done but still not working… :-S

Really odd… it’s as if once the site shrinks, a few things in my css are ignored.
I’ve got issues with the featured areas (images don’t sit in the middle), the site tag line somehow ignores the colour changes and reverts back to the original blue and so on…

Have you tested it on a real device because with the fix you just applied it’s now working great on my iPhone.

Odd!
No, I don’t have access to an Iphone, I’m afraid.
Relying on web based tools and they all look the same.
Tried a couple of different ones and also cleared my cache just in case…