Skip to content
Submitted 3 months ago

Blog preview card

Dei•60
@deidalopez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud about the amount of time it took me to churn this out.

What challenges did you encounter, and how did you overcome them?

I struggled with the card's width on mobile devices without using media queries, I think using rem units helped out a bit.

What specific areas of your project would you like help with?

Best practices to handle a responsive design.

Also, why not use media queries?

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 3 months ago

    Hi @deidalopez,

    Nice project! Media queries can be necessary sometimes, but if you use min/max width (not fixed width) and avoid setting fixed heights (relying instead on padding or margin to properly use the box model) you can often make sites responsive without them. Sometimes using min-height is needed, but it’s best to avoid it when possible. I’d recommend checking out Kevin Powell on YouTube—he’s an excellent coach for responsive design. I thought I knew a lot until I discovered his content, which showed me how advanced responsive design can really be.

    Hope this was helpful!

    Best, Teodor

    Marked as helpful
    1
  • Jawad•170
    @J-JawadPosted 3 months ago

    You did great. Much better than i did so i cant really criticize your work. I really liked how neat and readable the code is.

    1

Please log in to post a comment

Log in with GitHub

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