QR Component Challenge using HTML and CSS

Community feedback

• 

  James Niemerg•40

  @JamesN-devPosted 4 months ago

  Not bad for your first time. Pretty good! It’s great that you're diving in head first.

  Here are a few thoughts and suggestions that might help you refine things a bit:

  1. Layout Structure:

     • I noticed you’re using Flexbox, which is perfect for centering elements. One thing you might consider is wrapping related items in <div> containers. It can give you a bit more control over the layout and make it easier to manage styles.

  2. Responsiveness:

     • It looks like you’re using percentage widths, which is a good start. To make sure the card looks good on all screen sizes, you could try adding max-width and min-width. That way, it won’t get too small or too big, depending on the device.
     • Media queries might be something to look into next as well. They let you tweak styles for different screen sizes, like maybe bumping up the font size on larger screens for better readability.

  3. Styling:

     • The box shadow gives the card a nice depth. Great job on that.
     • Your colors match the original perfectly. Great job on that as well.

  4. Image and Text Styling:

     • The rounded corners on the QR code look a little flat on one side. You could fix that by using the same border-radius value instead of different values for each corner.
     • The text looks good and is easy to read. Maybe try playing with the font sizes or weights to create a bit more hierarchy between the heading and the paragraph.

  Overall, you’ve done a fantastic job. You have a solid base here to improve upon. Keep experimenting and having fun. Thats really what its all about.

  Cheers, JamesN

  0

  ---

  

  LeikoRed•10

  @LeikoRedPosted 4 months ago

  Hi @JamesN-dev about responsiveness, so you say that it could be like:

  width: 100%;
  max-width: 220px;
  min-width: 80px;
  

  I was considering using media queries, but since it was my first time, I didn't want to add many styles.

  With border-radius I have a problem. At the beginning, I only put

  border-radius: 20px
  

  However, when I see the qr image, The bottom corners are not rounded, they remain as they are. That's why I tried to increase them side by side until a change is noticed. I was seeing if any other styles are interfering with it, but haven't found one so far.

  Thank you very much for your feedback, I appreciate it so much.

  0