QR Code Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Trevor, congratulations for your solution!

  👋 Answering your question

  You could have done this code clean and lean just by using a single div to wrap all the content (img h1 and p). This is the cleanest html.

  For the css you can delete all classes and use the direct selector for each element (div main img h1 and p) since they're unique.

  Write a clean code is use only the necessary lines of code. It's really hard to know it by the beginning, but if you pay attention for these details you'll see that writing less give more control over the code and the css.

  Marked as helpful

  2

  ---

  

  Trevor•200

  @TactenatorPosted over 2 years ago

  @correlucas That makes a lot of sense. I'm making those changes right now. Thank you very much for taking the time to help out :) Have a good one!

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Trevor, welcome to Frontend Mentor, and congrats on completing your first challenge! Since Lucas gave you some excellent tips on writing cleaner CSS, I'll just give you a suggestion on how else you can make this responsive.

  Right now you've used a fixed height on your component as well as a width: 18%. The one issue with that is that, at a browser window size of 1440px, an 18% width is OK, but when the browser window is smaller, your component will also be a lot smaller, and at 375px, it's pretty much unreadable. What you can do instead is to use responsive properties such as max-width. You can try adding a max-width: 400px and see how what happens. I would also remove the fixed height, as you normally would want the browser to determine the height based on the contents inside, and if you fix the height, you could run into issues where there could be white space left or contents could be overflowing out of the container.

  Hope this helps a bit, and happy coding! 🙂

  Marked as helpful

  1

  ---

  

  Trevor•200

  @TactenatorPosted over 2 years ago

  @elaineleung Hello! I forgot to consider responsiveness for the browser. I very much appreciate the advice and I'm working on changing that right now. Thank you very much!

  0