Skip to content
Submitted over 1 year ago

profile card with html and CSS

nina1234567896•280
@nina1234567896
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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•490
    @Bibiwei-PerePosted over 1 year ago

    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•280
    @nina1234567896Posted over 1 year ago

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

    0
    Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

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

    0

Please log in to post a comment

Log in with GitHub

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