Responsive QR code Page

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi AyeniOlaoluwa, great work here! About your question, you already have done a lot to make it responsive, including using max-width: 100 with width: 400px and even using clamp() (which isn't an easy for many people)! One thing to suggest here: you can combine max-width: 100 with width: 400px as one declaration, like this: width: min(100%, 400px). Anyway, I really think you've done everything to make it responsive, and that's a great job 😊

  Two other things you can consider/try:

  1. I notice you're not using the font face listed in this design; you can try using Google Fonts to grab the link. I think once you change the font family, your design will look really close to the original.

  2. I see that you're using custom properties, great job! The only thing is, you should have them at the top whenever possible. I also see that you have a star selector rule, which is a good start to using reset/normalize rules. You can try adding more rules, especially the one for images since you'll most likely be working a lot with them in these projects.

  That's all for now, great job once again, and keep going!

  Marked as helpful

  1

  ---

  

  ayeniOlaoluwa•60

  @ayeniOlaloluwaPosted about 2 years ago

  @elaineleung Thanks for your comment. I really appreciate and I'll try working on your suggestions

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi ayeniOlaoluwa,

  Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. The alternate text should not be hyphenated, it should be human redable.

  • Add min-height: 100vh to the body instead of height: 100vh that let the body grows taller if the content outgrows the visible page instead.

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hello @ayeniOlaloluwa, how are you?

  I really liked the result of your project, I have some tips about your layout, I think you will like it:

  1- Document should have one main landmark, you could have put all the content inside a main tag [click here](https://dequeuniversity.com/rules/axe/4.3/landmark-one-main?application= axAPI)

  2- I noticed that you have relative measurement units in the layout, an advice I give you is, prefer to use relative units on smaller screens, use fixed measurement units only on larger screens so that when the resolution is increasing the card doesn't break.

  The rest is really good! hope it helps... 👍

  Marked as helpful

  0