QR Code Challenge by Mary Programms | HTML CSS

Community feedback

• 

  Han•340

  @hcxwebPosted almost 3 years ago

  Hello Mariana,

  Good job on your first challenge. I've looked at your solution and came with some ideas to help you.

  Let's redo the spacing to simplify the code and make it more responsive:

  1. remove margins for everything (or you can comment them out for now)
  2. add align-items: center to body
  3. add padding to the qrcode class
  4. for the image, add max-width: 100%
  5. add back margin between the image and text (either margin-bottom or margin-top is fine)
  6. you may also use max-width on the text to control its look if need to

  These should make the page responsive and you shouldn't see a scrollbar.

  Let me know if you have further questions.

  Marked as helpful

  1

  ---

  

  Mariana Ramos•50

  @mariana-c-ramosPosted almost 3 years ago

  @hcxweb hello Han, thank you so much for your feedback, I really appreciate it! :)

  Looking at my margins again, I definitely over complicated them. Makes so much more sense using padding - same thing with the align-items, I have updated my code!

  2

  

  Han•340

  @hcxwebPosted almost 3 years ago

  @mariana-c-ramos You're welcome! Glad it worked!

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Mariana Ramos Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  Marked as helpful

  1

  ---

  

  Mariana Ramos•50

  @mariana-c-ramosPosted almost 3 years ago

  @Crazimonk hello Naveen!

  Thank you, I have read the link you have sent me and it helped a lot in understanding better how to make sure accessibility is present in my projects!

  1
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Good work man, keep it up. One tip i can give you is to always add main tag and wrap the card so that you do not get accessibility issues

  Marked as helpful

  1

  ---

  

  Mariana Ramos•50

  @mariana-c-ramosPosted almost 3 years ago

  @Phalcin thank you for the tip, should have payed more attention to the tags I used, I did get the heads up on the report we get - will keep an eye for accessibility in the future!

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Mariana, good job! Congratulations on completing the challenge.

  I have some advice for you:

  • Adjustments for various devices should only be made when needed ... this challenge doesn't need it.
  • Margins overlap when elements have different position such as relative - fixed.
  • remove all margin from qrcode class because with flex they are superfluous.
  • Add main tag and wrap the card for Accessibility

  Overall you did well! Hope this help ;)

  Marked as helpful

  1

  ---

  

  Mariana Ramos•50

  @mariana-c-ramosPosted almost 3 years ago

  @denielden hey and thank you so much for the feedback! :) I have understood everything you mention, and I added some more things to help in the accessibility of this project, like roles and alt tags!

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  @mariana-c-ramos You are welcome! And don't forget to mark my comment as helpful :) thanks

  0