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

Display grid y flex. Background-image y max-width. MediaQuery.

TITOR 340

@hectorestebanm

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Desafio completado aplicando display flex y grid. Vistas para Mobile y Desktop. Cualquier sugerencia será bienvenida.

Community feedback

David 8,000

@DavidMorgade

Posted

Buenas Titor, enorabuena por completar el challenge, te quedo bastante bien el layout!

Me gustaría comentarte un par de cosas para que te puedan ayudar en tus proximos proyectos, con tu permiso por supuesto.

Primero que todo, el layout está muy bien, pero si quieres mantener todo centrado en la pantalla (me refiero a todo el componente en general, no los elementos de su interior), prueba usando flex en el body en vez de usar margins en el main, podrias quitar esos margins y poner el body así:

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}

Y con eso ya te quedaría todo centrado!

Otra sugerencia sería que ajustaras un poco el tamaño de los media queries, en vez de hacer el cambio a los 480px (aquí se corta un poco la imagen), yo le dejaría el tamaño de mobile hasta 768px y creo que quedaría mucho mejor, prueba y me comentas!

Espero que mi feedback te sea de ayuda para tus proximos proyectos, como te he comentado al principio has hecho un muy buen trabajo! Un saludo.

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