QR Component

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 12 months ago

  @LaxusWebDev congrats on completing your very first challenge on the site🎉🎉

  You've got a little bit problems with it, but you can fix them easily😄😄. So let's start

  • first change the .component-container.

  .component-container {
    */ width: 13.5% */
  max-width: 400px;
  padding: 1rem;
  }
  

  • and then on to your questions, You don't need media queries for this challenge. So don't even try to use it 'cause mobile and desktop designs are the same for this challenge. And you can know when to use a breakpoint by seeing when you design breaks or you can use predefined ones that bootstrap or tailwind provide (for example). And finally the 1440px breakpoint is something that frontend mentor advises to use as desktop breakpoint but it is not a standard

  I hope you found this helpful👍👍

  Have a nice day and best of luck for your journey on this site😄😄

  Marked as helpful

  1

  ---

  

  P

  Juan•480

  @JEWebDevPosted 12 months ago

  @ratul0407 Thanks for your reply! It helps a lot. i tried to not use pixels because i read that as an absolute unit, it's bad for responsive designs. Does that apply here?

  1

  

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 12 months ago

  @LaxusWebDev You should never use pixels for font size. And as far as other properties goes, If you're targeting a fixed size then pixels are fine. But if you want your layout to look good on various resolutions/screen sizes, then you should stick to more relative measures like rems or percentages. The percentage value was a little bit off so I went with width and as the design for the mobile and desktop are the same so using pixels won't be that much of a problem. But if you want to completely remove pixels from your dictionary then use rems. It's not that much of a problem. And by the way I also prefer rems for almost everything.

  Marked as helpful

  0

  

  P

  Juan•480

  @JEWebDevPosted 12 months ago

  @ratul0407 Yeah, that makes sense. Also rems are easier to calculate than percentages. Thank you very much.

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello Juan!

  Your project looks very good!

  I see you already had help, so I'll just give you a quick tip:

  • Consider adding a box-shadow to your card. It'll look even closer to the original design!

  Other than that, great job!

  0

  ---

  

  P

  Juan•480

  @JEWebDevPosted 12 months ago

  @danielmrz-dev Hello Daniel! Thanks for your tip! You´re right, i will add the box shadow so it looks even better.

  1