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 with html and CSS

@nina1234567896

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


Hello fellow coders! I tried to make my website as responsive as possible but may have failed. Where can i learn more about responsive design?No article seems to explain it well. Using pixels in my project was intentional because it didn't seem like the card looked different on mobile and desktop apart from the margins. Is my approach valid? Is using absolute units appropriate if a website is going to look the same on all devices such as this project? I also came across a problem trying to use the device developer tools. How do i stop the page from zooming in and out when changing the device width and height on google chrome?(i have tried switching off auto zoom). Your feedback is appreciated

Community feedback

@Bibiwei-Pere

Posted

Hi

Congratulations on completing this challenge

Firstly, you solution is not properly centered. To fix this add the following CSS to your body

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

Secondly, you can learn responsive web design from freecodecamp. They have an amazing Responsive web design curriculum.

Also is not advisable to use absolute units unless when needed. Use px or rem.

Overall, you did a great job 👍

Hope you find this helpful

Marked as helpful

1

@nina1234567896

Posted

@Bibiwei-Pere Thankyou for your feedback. I was having trouble centering the card. I will check them out. Thanks!

0

@Bibiwei-Pere

Posted

@nina1234567896 You're welcome Chief 👍 Let's connect on GitHub

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