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

pranav 120

@PrAnAvViNaYaKjAdHaV

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


plz give your feedback, just your simple feedback can help me a lot 🙂🙂🙂🙂🙂

Community feedback

Hania B. 1,360

@techanthere

Posted

Hey, great job with the first solution, it looks perfect visually.

Just a few things I will suggest to change in html structure. Use h1 instead of h4 and then you can change font-size for h1, you should use headings in order. And you don't really need to set explicit width and heights on ImageCenter class.

A simple way can be first setting width on card like here the first div with class "center" takes some fixed width for the whole card size (no height required) and then when you set width: 100% on img inside it automatically fits the card width. You can apply vertical and horizontal padding on the div with class "ImageCenter" then.

I will also suggest to use the rem units instead of px, they are more flexible and will be helpful in future projects as well.

Happy Coding :)

Marked as helpful

1

pranav 120

@PrAnAvViNaYaKjAdHaV

Posted

@techanthere thanks for your feedback I try my best to implement all methods or tricks you mention

1

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