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 Card Using HTML and CSS

Jana 70

@JanaAbhi

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?

I just can't code the exact design 100%, I usually feel like I'm missing something. I think the best way to overcome this is to practice more.

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

None

What specific areas of your project would you like help with?

I need help with relative units, and with responsive design.

Community feedback

Boris 2,870

@mkboris

Posted

Hi Jana, great job, here are some suggestions

  • To get your component properly centered, on your body add
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
  • Your .scene should have a max-width in rem and not width.
  • Your img should have a max-width: 100%. Avoid setting fixed widths and heights on elements as that's going to probably cause some issues with responsiveness. Use max-width and percentages as units is a good option.
  • You don't really need media queries for this challenge and it can be styled the same for mobile as well as large devices. But if you want to, media queries should be defined in rem not px.
  • Font sizes should be in rem not px, this article explains it better Why font-size must NEVER be in pixels.
  • You can learn more about building responsive designs here responsive design.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset. This will help reset a list of default browser styles.
2
Jana 70

@JanaAbhi

Posted

Thank you for your suggesstion dude!

will change that afterwards 😊.

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