Skip to content
Submitted 7 months ago

QR Code Challenge #1 Html CSS

ciri-ryan•10
@lilshebeary
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

That I could replicate it, maybe use Bootstrap or SASS nextime.

What challenges did you encounter, and how did you overcome them?

could be more responsive, in the style page information it was confused about the web page width size and when I went to add a @media, it got weird

What specific areas of your project would you like help with?
  1. How to make it responsive and adhere closer to the style page.
  2. If I should do anything differently.
  3. If someone could explain why align items never seems to get implemented to move content to the center of the screen

Community feedback

  • Lord Robins•550
    @ZenitsuAgPosted 7 months ago

    Hi @lilshebeary, you've done a great job!! I see that your struggling a bit with centering your content at the center of the screen. All you have to do is add this code to your css file

    * {
  margin: 0;
  padding 0;
  box-sizing: border-box;
} /* This is the best reset */

html {
  height: 100%;
}

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

    This code will fix the problem you're facing. Here, we are setting the height of the page to 100%, and the min-height of the body to that same 100%. Doing it like this will make body equal to the entire viewport (the whole page) and it can actually center your content the way you want.

    You don't need to stress yourself too much about anything, your work is great! Feel free to ask any questions tho.

    Happy Coding :)

    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