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 component - HTML + CSS + VSCODE

#accessibility
P

@steven-barkley

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


The was easier because I completed the Product Card project before this. I used w3schools for reference as well my previous project. It was done a lot faster than the first one. I would love to improve this so suggestions are welcome.

Community feedback

@madkn1311

Posted

Hello Steven,

You got the design of the card perfectly.

To center the page vertically and horizontally, you should use flex.

For that you will need to add min-height: 100vh to the body so that it's centered vertically on all devices.

Just using normal height won't make it responsive.

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

Also in this link: <link href="style.css" text="text/css" rel="stylesheet" /> you need to add type instead of text, because the type of the document is text/css.

Type specifies the type of the document/resource.

I hope this was helpful :)

Marked as helpful

1

P

@steven-barkley

Posted

@madkn1311

Thank you. Because I didn't know what some of the CSS attribute functions, I did not use them. Will need to further my understanding of these CSS attributes working in tandem.

As of the type attribute I don't need it in this case. Maybe I should learn how to use the "media" attribute. I made the mistake of type "text" when I should have said "type" but next time I would use it at all since it is redundant.

1

@madkn1311

Posted

@steven-barkley you're welcome

It's all about learning, making mistakes, and improving them, don't worry you'll get it. :)

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