Qr Code Card Component - My very fist step in frontend mentor

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Limited Browser Support for :root Variables:

  • The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable

  Font Sizing and Scaling:

  • If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:

  html {
  font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
  }
  
  p {
  font-size: 1.6rem; // Here this paragraph font-size will be 16px;
  }
  

  If you don't understand it already here is a VIDEO

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  Keiner Mendoza•240

  @keinermendozaPosted 3 months ago

  @MikDra1 Thanks for taking the time to read the code and share your knowledge.

  I watched the two videos I will use a fallback for the css vars, thanks for the suggestion and I finally understand why some people use em for margins and padding. 😅

  I am wondering if there is a side effect to setting the font-size in html other than affecting rem units.

  0

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @keinermendoza

  It can affect browser default styles which are set in rem's. But beyond that if you understand REM well enough there won't by any obstacles for you.

  Like if you set 1rem = 10px then all of the sudden your paragraphs will get smaller because theirs font-size is set to one rem. An easy fix for this is to set the font-size on body to 1.6rem;

  Hope you found this response useful 💗💗💗

  0
• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Your class naming is clear and quite descriptive, which is great. If you are looking for a better alternative, you can adopt the BEM naming pattern.

  1

  ---

  

  Keiner Mendoza•240

  @keinermendozaPosted 3 months ago

  @mkboris Thanks for taking the time to read the code; I appreciate it. And thanks for sharing the article. I like the idea of using that standard. I’m not completely sure if I understand it yet, but I will keep trying to use it.

  0