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

Order-summary-component Receptivo, FlexBox

@santi19999

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Cualquier Sugerencia, es aceptada! Saludos desde Chile.

Community feedback

@AGutierrezR

Posted

Wow! Esta genial! Tengo varias sugerencias que te podrían ayudar:

  1. En la sección card-buttons usaste display: flex pero no necesitas justify-content: space-between, podrías quitar esa propiedad completa y aplicar un margin-left: auto al elemento <a>. Esto hará que solo ese elemento se alinea a la derecha como esta en el diseño.
  2. En algunas ocasiones hay que se cuidadoso con el uso de width con valores fijos (px, rem, em), es mejor usar valores fijos con el max-width o min-width.
  3. Relacionado con el punto dos, en la clase .card podrías usar un width: 100% y un max-width: 375px (linea 31 del archivo .scss). De esta forma no tendrías problemas con pantallas menores a 375px
  4. Para evitar tener que adivinar el tamaño máximo de los elementos internos, podrías usar un padding en el padre, en este caso el .card-body podría darte beneficios si le colocas padding. Asi puedes hacer que el button tenga un width: 100% y el padding lo detendría.

Marked as helpful

0

@santi19999

Posted

@AGutierrezR, Muy bueno tu aporte amigo , lo pondré en práctica para seguir mejorando. Saludos

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