-
AuthorPosts
-
September 4, 2023 at 3:30 pm #1418044
Hi I need some help with a stubborn problem.
My slider’s content is broken on iphone. I’ve tested 3 iphones. And the problem can be reproduced on https://testingbot.com/
The issue is seen on both my wife’s iphone X and my wife’s 2 friends iphone 14’s.
The problem is seen here:
The headshots of our therapists are in an incorrect aspect ratio. The video layer has 30% of the right side cut off. And the text boxes are incorrectly sized causing the text to overflow out of the container.
These issues are not seen anywhere else, such as in a Windows browser of any kind or on Android device.
I’ve got a support ticket in with slider revolution support that has reached the point that they’ve asked me to do a conflict test as described here:
https://www.sliderrevolution.com/faq/how-to-test-and-resolve-conflicts/
I’ve followed the instructions to the point of disabling everything except Enfold itself.
Can you guys please help? I really need this slider upgrade to our site. You can see the difference between how great this slider upgrade is with the videos I made compared with our live site.
live site:
alphafamilycounseling.net
upgraded site slider (view on anything but an iphone to see how great it is):
September 6, 2023 at 10:50 am #1418251Hey Marc,
Thanks for the information.
I added the following code to the bottom of the Quick CSS field in the Enfold theme options > General Styling tab and that helped
@media only screen and (max-width: 480px) { #rev_slider_3_1 a.rs-layer { max-width: none !important; } }
Please review your website.
Best regards,
YigitSeptember 6, 2023 at 2:25 pm #1418272September 6, 2023 at 2:26 pm #1418273That layer looks fine on the slider revolution preview and on Windows Chrome and on Android. But it’s got the same problem as before on iphone. It seems the fix you applied was effective for every other layer in the slider except this one. Hoping there’s something we can do to get this one fixed too.
September 7, 2023 at 11:41 pm #1418409x
- This reply was modified 1 year, 3 months ago by Camineet.
September 8, 2023 at 12:24 am #1418411Hi Yigit,
For some reason, all of the problems are back. I was doing some editing to the slides, and I checked iphone and found that the fix you put in before with Quick CSS is not working anymore for some reason.
Here’s a pic from testingbot that I took today showing all the same problems as before. Can you please take a look?
September 9, 2023 at 11:32 pm #1418607Hi,
On this page: https://alphafamilycounseling.net/slider-revolution-test-page/
the ID for Yigit css doesn’t exist #rev_slider_3_1 you said that it worked fine until you made some changes, perhaps the changes changed the ID to #rev_slider_9_1 so try this css:@media only screen and (max-width: 480px) { #rev_slider_9_1 a.rs-layer { max-width: none !important; } }
After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.Best regards,
MikeSeptember 9, 2023 at 11:55 pm #1418610Hi Mike,
Your solution worked instantly without any need to clear the cache. Thanks a lot!
Can you let me know how you were able to ascertain the slider name to be #rev_slider_9_1 instead of the old one “3_1” ?
I’d like to be able to figure out that number without having to bother you guys to help me with that.
September 10, 2023 at 12:12 am #1418613September 10, 2023 at 12:37 am #1418619Yep, that’s what I figured and I tried that but couldn’t find it easily enough and gave up. But I can reproduce it now that you confirmed that’s where you find the id. Thanks yes we can close this one.
September 10, 2023 at 1:00 am #1418620Hi,
Try using the search function in the Dev Tools and search for rev_slider_ so no matter what the number is you will find it.
When you open the Dev Tools (F12 on Windows) click in the middle of the code to ensure you are searching that panel and use the keyboard Ctrl+F (Windows) and paste (Ctrl+V Windows) into the find field and hit Enter:
the text will be found and highlighted for you. Please note that you will hit the Enter key twice because you want the second one the first one is the wrapper rev_slider_9_1_wrapper and not correct for Yigit’s css.
See if this helps you find it.Best regards,
MikeSeptember 10, 2023 at 1:03 am #1418621Thanks Mike this is hugely helpful!
September 10, 2023 at 1:20 am #1418623Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘slider revolution compatability’ is closed to new replies.