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 card com uso de CSS flexbox

@AllanSancley

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


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

  • Me orgulho de concluir o objetivo de deixar o pagina conforme o design.

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

  • O principal desafio foi o alinhamento tanto das linhas quanto das palavras para deixar conforme o design, e as sombras do cartão.

  • Fiz algumas pesquisas e encontrei alguns artigos sobre o assunto que tiraram as minhas dúvidas.

Community feedback

romannst 50

@romannst

Posted

Hi Allan, I see your solution has some common issues that affect responsive design on different devices:

  • First i recommend u to use a modern css reset, Andy Bell or Josh Comeau both have good ones.
  • Remove the width and height on the general box (the card). You don't need that. All it needs is a single max width in rem.
  • The container class need min-height 100svh along with flex column properties to center. It's the browsers job to decide how tall the component needs to be.

I'm also just starting out, so it's good for me to try to help people who are going through the same path. Good luck with your upcoming projects!

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