A simple plain HTML & CSS component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @ssembatya-dennis, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Align the main text centered:

  .QR__title {
      text-align: center;
      font-size: 1.8rem;
      line-height: 1.5;
      font-weight: 700;
      color: hsl(218, 44%, 22%);
  }
  

  2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  3.To maintain the card responsive use max-width instead of width this way you allow the content to be flexible. The difference between max-width and width is that width is fixed and max-width has a maximum size but can shrink to fit the content.

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Ssembatya Dennis Duncan•260

  @ssembatya-dennisPosted about 2 years ago

  @correlucas Thank you so much. Have went through your code to see how you approached this challenge and indeed you inspiring! Wow, I truly appreciate your advise on how to cleanup my code & improve on the card responsiveness and I look forward to exercise more challenges

  0