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

Responsive QR Code Component

@MiguelDeLaMora

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 did you find difficult while building the project?

  • The thing that i spent more time was on making responsive the page. First I made it with the principles of "Mobile first".

Which areas of your code are you unsure of?

  • On how I arrange the date and items (flex or grid)

Do you have any questions about best practices?

  • Yes, on my css

Community feedback

@baileyfrye1

Posted

Hey Miguel! Your CSS overall looks pretty good. Couple pieces of advice I have, I would set your font family on either your body element or on your card, that way you don't have to declare the font-family for each text element. I would also utilize the "margin" shorthand so you don't have to individually set every side. (i.e "margin-bottom: 3em; margin-left: 2.5em; margin-right: 2.5em;" could be set to "margin: 0 2.5em 3em" and "margin-left: 2em; margin-right: 2em;" could be set to "margin-inline: 2em")

It does look like your image isn't loading, in your HTML you have your image source set to "/images/image-qr-code.png" but in your file structure you do not have an images folder so it is not able to find your image. If you just remove the "/images" from the front of your source everything should work fine. Without seeing the image it's impossible to tell how the CSS looks for the image.

Great job overall though and great use of responsive CSS units!

Marked as helpful

0

@MiguelDeLaMora

Posted

@baileyfrye1 Thanks for the feedback, Bailey! It is a lot of help!

I had a little trouble making the image deploy on github pages. I read it is case sensitive and i managed it to display. By now it is visible.

Thank you for your time!

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