Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card using flexbox | Mobile-first workflow

@Ynotlocin1

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Craig 190

@cchivers

Posted

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 helpful

0

@Ynotlocin1

Posted

@cchivers Yeah I tried it out, and that's really cool ! Thank you !

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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