Skip to content
OverviewSolutions
10
Comments
3
Amelia Dutta
@amelia2802

All comments

  • Amelia Dutta•160
    @amelia2802Posted almost 2 years ago
    • Replace <h5> with <h1>.
    • Use <section> instead of div
    • In the stylesheet set .qr height auto and decrease the width.
    • add media queries for mobile devices (you can set max-width upto 600px) then adjust the style accordingly.

    Hope this will help you :)

    Happy Coding!🎉

    0
  • Amelia Dutta•160
    @amelia2802Posted almost 2 years ago

    Hey, Congratulations on completing your first challenge! 🎉

    Here are few suggestions to improve your project.

    Replace the <h2> with <h1> and <div> with <section>, <footer> according to your code.

    Hope you find it helpful!

    Happy Coding.😄

    0
  • Zack•80
    @ZeroScriptzSubmitted almost 2 years ago

    Nothing difficult just, I did not want to make a separate CSS file so when trying to make a media query for large scale devices it would break.

    Since I mastered the React.js, TailwindCSS, and more libraries. I will continue to use them just to make it easy and fast process!

    Unsure of the media queries and locations.

    No questions further!

    QR Code Challenge | frontendmentor.io

    1
    Amelia Dutta•160
    @amelia2802Posted almost 2 years ago

    Hi Zack, Congratulations on completing your first challenge! 🎉

    From your code, I can see that

    • You've declared the card section <section class="md">...</section> outside of the <body>...</body> tag. You should declare it inside of the body tag.
    • Add an alt=" " attribute to the <img> as it will be helpful for screenreaders.
    • wrap that .qrHead and Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> with <p>...</p> tags as those aren't headings.
    • Add display:flex into the .section{..}.

    Hope you find it helpful!

    Happy Coding.😄

    Marked as helpful
    1