Design comparison
Solution retrospective
Hola, buenas tarde.
En este desafío aun tengo dificultades con flex y grid.
Community feedback
- @correlucasPosted over 2 years ago
Hola Carlos Alberto, que tal? Congratulations for your solution.
I've looked your live site and I have some advices you take in consideration to apply in your challenge solution:
- You can build this solution using Flex or Grid, I've chosen Grid because was easier to divide the container in two columns. To create the card with:
GRID you'll need an element as a div/main/section and apply the property
display: grid;
and alsogrid-template-column: 1fr 1fr
to divide this card in two columns.FLEX the approach is similar, but inside the container you'll need to set
display: flex;
andflex-direction: columns
/flex-direction: row;
depending if you want the card columns vertically or horizontally.For more info about these flex properties read this article:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
To see how a did this challenge using GRID you can look my solution here:
https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
- You've used the same class for the overline heading (perfume) on the paragraph. So your
.container p
has a inappropriate letter-spacing
I hope it helps you bro!
Marked as helpful0 - @Enmanuel-Otero-MontanoPosted over 2 years ago
Hola Carlos
Si puedes especifica cuales son tus dudas, así te podremos ayudar mejor.
Saludos
0
Please log in to post a comment
Log in with GitHubJoin 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