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

QR Code Challenge #1 Html CSS

ciri-ryan 10

@lilshebeary

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@ZenitsuAg

Posted

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
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