Design comparison
Solution retrospective
It was a good challenge to refresh my knowledge of using hover effects and media queries to add a mobile version of the card.
Also I'm back to SCSS and it's awesome, my work with styles is more comfortable and effective now.
Pixel Perfect is a great tool to check how my work matches with the layout and I'm quite satisfied this time with the result.
Next time I want to do a fully responsive design.
What challenges did you encounter, and how did you overcome them?It still takes a lot of time, I have to make it faster. It comes with time, so I have to be patient and persistent.
What specific areas of your project would you like help with?Any feedback about media queries and responsive design is very welcome.
Community feedback
- @erratic-enigmaPosted 8 months ago
Hello, nice work on this challenge! There's a few improvements I can suggest:
I would recommend using either flexbox or grid to center the card. The
position: absolute
andtransform
method is unwieldly and will likely give you problems on future challenges. Here's an article about this if you're unsure.I see you used
role="main"
on the.container
div
. You should replace thediv
with themain
element instead. It serves the same purpose asrole="main"
. Same thing with the.attribution
div; replace it with afooter
element.I would recommend applying classes directly to the elements you want to style rather than wrap them in a
div
with a class. Some wrappers are necessary (i.e.:.card-author-wrapper
,.card-image
and.card-tag
), but most of them just add unnecessary noise for no benefit.Regarding making this challenge responsive, I would start by trying to remove the fixed
px
width
in favour ofmax-width
for the card. The image shouldn't need a fixedpx
width
either.Marked as helpful1@VH135Posted 8 months ago@erratic-enigma Hi there! Very detailed and helpful feedback, much appreciated! In the next project here I will try to apply all of these recommendations for sure. Also I've found some useful tips in your project, very nice work too.
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