Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 4, 2023 at 3:30 pm #1418044
    Camineet

    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):

    slider revolution test page

    September 6, 2023 at 10:50 am #1418251
    Yigit

    Hey 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,
    Yigit

    September 6, 2023 at 2:25 pm #1418272
    Camineet

    Thanks Yigit. That worked for all elements except for one.

    Is there anything we can do to fix this one?

    Screenshot-1

    September 6, 2023 at 2:26 pm #1418273
    Camineet

    That 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 #1418409
    Camineet

    x

    • This reply was modified 1 year, 2 months ago by Camineet.
    September 8, 2023 at 12:24 am #1418411
    Camineet

    Hi 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.

    Screenshot-1

    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 #1418607
    Mike

    Hi,
    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,
    Mike

    September 9, 2023 at 11:55 pm #1418610
    Camineet

    Hi 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 #1418613
    Mike

    Hi,
    Glad to hear this helped, I used the Chrome Dev Tools and the inspector to see the ID of the slider:
    Enfold_Support_3212.jpeg
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    September 10, 2023 at 12:37 am #1418619
    Camineet

    Yep, 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 #1418620
    Mike

    Hi,
    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:
    Enfold_Support_3219.jpeg
    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,
    Mike

    September 10, 2023 at 1:03 am #1418621
    Camineet

    Thanks Mike this is hugely helpful!

    September 10, 2023 at 1:20 am #1418623
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘slider revolution compatability’ is closed to new replies.