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 Main

Yeyo Pocheโ€ข 30

@Poche89

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


Hi, This is my second challenge after some many years. I just want to know, how I could use less CSS for responsive design. Thank you.

Community feedback

Aditya Singhโ€ข 460

@adityas24

Posted

Hey Yeyo great job! I studied your work and i saw that you have written lot of media queries for every screen size available. That is old way of writing media queries and not the best practice in 2022.

The best way would be you start decreasing size of screen and see where the elements are breaking. Suppose they start breaking at 1200 px. So you write media query for 1200px. And write your code in media query such that it works atleast for next 150-200px. I mean your website does not break for next 150-200px.

Then again decrease the size of screen. Suppose now your website start breaking at 950px. Then again write media query for 950px. And so on.

And i saw you wrote a media query for 375px and 320px. The media query written for 375px will even work well for 320px. If it is working well, then why to write extra code?

I hope you got my point๐Ÿ™‚. All the best ๐Ÿ‘

Marked as helpful

1

Yeyo Pocheโ€ข 30

@Poche89

Posted

@adityasingh84 Thank you for your feedback.

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