Responsive QR code component using css flex

Community feedback

• 

  Kimo Spark•2,190

  @kimodev1990Posted 12 months ago

  • For maintaining images sizes with different layout dimensions : By wrapping the images inside a DIV and giving width:100% for image and for the DIV we use the clamp ( ) method to change the size according to viewport dimensions and suiting different devices' layouts . Other than that, Keep going on & nice work.

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello @Code-Me-Well!

  Your project looks great!

  I have a few suggestions for you to improve it:

  1 - About font-weight: Instead of using bold, bolder you can give it number values. In the style-guide file, you can check what are the recommended font-weights for the project. I always import all the available weights from Google Fonts and test them until I get the closest result from the original design.

  Also, I noticed that you used a h3 for the title. Since that's the main text on the screen and every page should have a h1, you can replace that h3 with a h1. That will help you with the font-weight problem too.

  2 - You used 2 different divs for the main content. Unless you have a specific reason to do that, that's not necessary. You can use only one tag and since it's the main content, for semantic purposes, it should be a main tag.

  Your project already looks very good, but those suggestions can make it more semantic and also optimize your code.

  I hope it helps! 😊

  Marked as helpful

  0
• 

  Ah-med007•40

  @Ah-med007Posted 12 months ago

  I don't think div have semantic meaning, I think the img should be in a figure tag then placed together with the paragraph inside a main tag. I also don't think you successful imported/linked the outfit font to your stylesheet

  Good work!

  0