QR Code Component Using HTML and CSS

Community feedback

• 

  Lukáš Říha•225

  @lukasrihaPosted about 1 year ago

  Hi Jaecoder20,

  I think the best practice regarding you are looking for concerning media queries is called "mobile first".The core idea is that you start styling your page/app for mobile devices. Once you're done with that, you start increasing the viewport width, and once something breaks or start looking bad, you add a media query to fix your styles. :) There's an article on css-tricks - it's a great site and I can't recommend it enough.

  Also, look up something called BEM - it's a way to organize your css code.

  Overall, great work, keep hacking! :)

  Marked as helpful

  1
• 

  Lars Fredrik•60

  @LarsiParsiiPosted about 1 year ago

  Hi! Just some quick feedback:

  1. Noticed a QR overflow on wider screens. No need for media queries here—just set a max width on the QR code div, and a width to ensure it adjusts on narrower screens. Consider clamp() for responsive sizing. Media queries are better for altering layout/content per screen size. A mobile first approach is a good practice to simplify initial designs, though not crucial for this challenge. :)

  2. The QR code is rounded at the top, but padding pushes the image down, leaving an empty space. Understand the difference between padding and margins, and apply "box-sizing: border-box" to all elements using the universal selector "*". This along with clearing default margins and padding should be among your first steps – it's a game changer! :)

  1