Blog preview card using flexbox | Mobile-first workflow
Design comparison
Solution retrospective
Hello everyone, 3rd project created here, no major challenges on this one.. (maybe my code isn't optimal, I'm counting on you to let me know.) The only difficulty I had, and that I had for my previous project, concerns media queries. I want that when it switches from mobile to desktop version, there's no jolt, that there's a smooth transition, is it possible?
Community feedback
- @cchiversPosted 9 months ago
Just a quick answer to your questions would be yes there is an easy way to do the transition. for example: (pulling from stack flow)
@media screen and (max-width: 400px) { div { background: navy; } } @media screen and (min-width: 400px) { div { background: green; } } div { transition: background 2s linear; width: 400px; text-align: center; color: white; }
The transition does not go into the @media query but instead into the element that is going to be changing via the media query.
If you have any further questions please let me know and I can try and help
Marked as helpful0@Ynotlocin1Posted 9 months ago@cchivers Yeah I tried it out, and that's really cool ! Thank you !
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord