Image flip working fine on desktop but need help with mobile

I have no clue what to do to fix this issue or even if it's fixable. I also know that the response of images is different on mobile site. If you go to my homepage www.eocharlotte.org and scroll down you will see under "The EO Experience" and other sections where the image rotates to display information and a purple background. On the mobile site it just shows the title word and the description on the image all jumbled and overlapped. Is there a way to fix it to work on both? Or just have the title words on the mobile site? Or any suggestions on a different way to display these that work on both desktop and mobile?

What is site url?

www.eocharlotte.org 

On 6/10/2023 at 1:39 AM, Kmacenka said:

I have no clue what to do to fix this issue or even if it's fixable. I also know that the response of images is different on mobile site. If you go to my homepage www.eocharlotte.org and scroll down you will see under "The EO Experience" and other sections where the image rotates to display information and a purple background. On the mobile site it just shows the title word and the description on the image all jumbled and overlapped. Is there a way to fix it to work on both? Or just have the title words on the mobile site? Or any suggestions on a different way to display these that work on both desktop and mobile?

What should it look like on mobile? Hide title or?

What is possible? I thought it would only show the title words and the coding would initiate the flip on desktops but it's showing all words on mobile. Is there a way to have the flip work on mobile but still keep the flip on desktop? or if it's easier just have either the title word or the content? 

I don't have a solution.

There is a fundamental difference between desktop (a device with a mouse) and mobile.

On desktop you use a mouse and a moused device has the concept of hover. Hover is when the mouse is over something but not actively being clicked.

This is how the hover pseudo-class works.

On mobile (touch screen devices) there is no hover concept. So for mobile you have to adapt an effect to work with mobile devices.

I'm not sure if I have the complete answer, but I actually know what the issue is. 🙂 I took a look at your site, and the keywords you should google are: webkit, media queries, and card flipping in css. Here is a link to the best guide to css: 

https://css-tricks.com/almanac/properties/b/backface-visibility/

You actually have two issues:

1. regardless of viewport size (size of the browser window) - iOs mobile behaves differently, and your code needs to declare webkit variables with slightly different language to make Safari do stuff correctly. 

2. Viewport size. Your site also did not show your card flips correctly when I shrank my browser to half the size of my laptop screen. This is where media queries come in. There are breakpoints that tell the browser how to show your images, depending on what size the window is.

I'm adding a link to my git repo for a different (non-Squarespace) site, so you can check out the exact html and css I used. 

https://github.com/readingshapes/fearflashcards

Start with the index.html file, as it has css at the top. Hopefully you can compare your code to it and see where any differences might be useful.

I haven't solved it perfectly myself yet, which is why I didn't say I had a solution, but I can definitely help you a little bit? The next thing I'm going to personally try, in order to get Safari to allow flipping is to re-incorporate javascript. Good luck to you, hope this helps.