Design comparison
SolutionDesign
Community feedback
- @marcus-hillPosted 18 days ago
Hi @roychandu, good job with this - I think you've made a good effort but there is definitely scope for some improvement. I am unable to access your GitHub repository so I am providing this feedback visually & with access to the dev tools:
- There does not appear to be a max width on your card in
rem
- instead it is set to60%
which makes the card incredibly large on bigger displays, which isn't good. - As this happens, the profile picture and author's name overflows out of the card with the text also scaling incredibly large - given you have a font size set in
vm
. I do not see why you have the font size set invm
which is a percentage of the viewpoint width. I would recommend usingrem
for your fontsize, which scales with the user's browser default. - On mobile, there appears to be a significant amount of white space at the bottom of the card. I can see you are utilising flexbox with
flex-direction: column
- however there appears to be no use ofjustify-content
oralign-items
which could have created the required spacing between these elements, such as the use ofspace-between
. - On pressing the share button in mobile view, there is no button visible which allows for it to be toggled away again.
- There also appears to be no max width on the image, which will continue to scale so large or so small (to the point that little of the image is visible) as I switch to mobile view which is quite a problem for this responsive design.
With a few improvements, this design will be much better. Remember to allow access to your Github Repository (I am assuming you have forgotten to make it public).
0 - There does not appear to be a max width on your card in
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