Design comparison
Solution retrospective
Hello guys, I would like to know some specific points and I hope you can help me.
- Did I correctly implement the BEM methodology?
- Is there any way to improve or optimize my code? Thank you for your time and best wishes to you.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Freddy Santana, congratulations for your solution!
I saw your live site right now and its almost finished, there's only some small details you can fix in order do improve it.
1.The background is not full width because you've add it to the
container
not that there's a difference between the card size and the screen size, the width1440px
given for the challenge is just to say in which resolution the challenge was created, you don't need to set amax-width
for the body and for the component themax-width
is 350px thats its size:To fix the background not filling the full screen just remove the
max-width: 1440px;
:.container { /* max-width: 1440px; */ }
2.To allow the component card to be responsive you've to replace
width
withmax-width
the difference between this two properties and thatwidth
is fixed andmax-width
is flexible.Hope it helps Freddy, and happy coding!
Marked as helpful1@CreixzPosted about 2 years ago@correlucas Thanks my friend, I'll try to implement what you recomment me in this and the others projects that I'm going to do. Thanks for your time.
0 - @sinjin25Posted about 2 years ago
The BEM seems correct.
I'd recommend putting padding on the card rather than on each element inside the card. This will let you standardize the padding instead of having to set in everywhere. The method you did makes it hard to make changes.
You can get away with just having this on the image:
max-width: 100% border-radius: (whatever)
That lets you get away from using a magic number for width.
grid-template-rows with percents seems like a bit of a fragile solution. I'd recommend splitting it like: card -> card-head + card-body and then maybe using fr to divide up the space between the head and body.
Marked as helpful1@CreixzPosted about 2 years ago@sinjin25 Thank you my friend, your feedback really helped me a lot. You are right its better to use fr in grid and split using card>card__head and card__body.
1
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