HTML/CSS pt2 - transition durations not working

The transformations work, but not the transitions - They have caution triangles in chrome devtools and I have not yet learned how to troubleshoot what is superseding/blocking them.

  • I even replaced my transition lines with Mosh’s with no success, so I suspect something else is wrong.

2nd question - why do the transformations only work in full screen. They do not function in the mobile-first portion - in Mosh’s code or mine?

Please put some screenshots of the component and the code, that is how we might be able to help you.

The transitions are now working - not sure what I changed.

but the transformations still only work in full screen. Here’s a snap of the devtools in iphone mode

hmmm, doesn’t look like an image…

try resizing the screen (not in inspect) to see if it works in mobile mode. I think when u said mobile, you are in inspect mode mobile portion like the image you uploaded.

you are right! I think.

It works when I close devtools and resize the screen.
It works in devtools in full screen mode, just not in Toggle Device mode. I’m new and am wondering why that is the case. (I assume I should be able to test all features in Toggle Device mode) - and I don’t know enough to port the page to test it on my phone

My understanding is, hover acts differently when it deal with mobile devices since there is no curser for mobile devices. I would recommend that you resize the screen to test any @media because devtool is not useful in this case. Thats why you see Mosh always resizing the screen whenever @media is involve. Also if you want to test it on mobile, you can try using codepen.io. You can just type the url of your page on your phone to see how it would look. The downside is image have to be somewhere online cause you have to go pro if you want to upload an image file.

1 Like