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

Centering and layout

@VincentGammill

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


Using Chrome developer tools and looking at the mobile view (Ctrl+Shift+I then Ctrl+Shift+M), my card ends up stuck to the left side of the screen. How can I fix that?

Community feedback

Adarsh Pratap 5,515

@adarshcodes

Posted

Hi @VincentGammill, Firstly welcome to this amazing community and congratulations on submitting your first solution over here.

  • Your design is looking fine. You can add those background images using CSS to make them more responsive.
  • Responsiveness is not working properly. You can try to make it more responsive.
  • Great work! It's your first solution and no issues aroused. Keep It up. Happy Coding😀
3

@codebyfauzan

Posted

Good work Vincent. I've check your solution, it seems like because of bottom circle overflowing so the profile card position is on the left of screen and unfortunately I don't know how to fix that, sorry. But I want to recommend you to using bg-pattern-top, bg-pattern-bottom and bg-pattern-card as backgrounds instead of images so they will not overflowing from their element. There are many background properties like background-image, background-size, background-attachment, background-position that can be useful to make them more responsive. You can check my solution here and give a feedback too. Keep Coding!

1

@VincentGammill

Posted

Thanks, that was helpful! That seems to have fixed the issue.

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