Design comparison
Solution retrospective
Waiting for the feedback...
Community feedback
- @correlucasPosted over 2 years ago
Hey Fausto, I took a look on your soluction for the product card. I'll leave you some feedback:
The card is made by two sections that are equal, I saw that you used flex and set 50% for each div, you can also use grid in your <main> and delete the width:50% from the divs inside the main. This will create you a grid of two columns and make the card flexible when stretch.
See the code below:
.main { display: grid; ** grid-template-columns: 1fr 1fr;** background-color: hsl(0, 0%, 100%); width: 35rem; border-radius: 0.5rem; }
When you'll net to change the card direction, just change the main display to flex and set the
flex-direction: column;this will keep your good really more simple than defining the values with flex.- Fix the accessibility issues wrapping up all content inside the <main> tag instead of a <div> with the class main and set also the page language like here
<html lang="en">this will keep your code more semantic and concise.
Keep it up!
Marked as helpful0@fausto-machavaPosted over 2 years ago@correlucas Thank you for the feedback, i will make the changes
0 - Fix the accessibility issues wrapping up all content inside the <main> tag instead of a <div> with the class main and set also the page language like here
- @zicoovicPosted over 2 years ago
hello bro, good job
what did you do to make it fit the height like the original design?
you need to make the weight more considerable but good job bro.
0@fausto-machavaPosted over 2 years ago@zicoovic I defined a min-height for my main tag so that it should resize dependig on the content
0
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