Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component

@naygo

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would like to receive feedback on how I used @media to make the layout responsive.

Community feedback

@pikapikamart

Posted

Hey, good work on this one. Layout in desktop seems fine and the mobile state is fine as well at some sort of range.

Regarding your query, I think you did fine using the breakpoint for the background-images, but I suggest that you make it more early than 375, but that is my personal preference.

Upon looking at dev tools, from the bottom. Your element gets squished in the middle from vertical axis. I saw that you used height: 100vh in the body tag, I recommend not using that, because if you have a large layout, it will cap the body tag which is not good. Instead you can just replace it with min-height: 100vh. Also adding padding to the top and bottom will be awesome.

Lastly, maybe removing the position: fixed in your attribution will be really good so it won't stick in the screen, if opening up the dev tools.

Overall, you did a good job on this one^

1

@naygo

Posted

@pikamart Hey! Thanks for the feedback, really! I'm trying to improve on CSS and it really helps me. I'll apply the tips you gave me, thanks again :D

0

Please log in to post a comment

Log in with GitHub
Discord logo

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