Skip to content
Submitted almost 2 years ago

Responsive QR Code using HTML and CSS

Basant Soni•450
@SoniBasant
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. The most difficult part was to determine dimensions of the project. As font size of paragraph was given so I took it as reference height for all things. Any other way?

  2. While I was making project, I restore down sample image and continuously looking at it and at the same time I have VS code open along with live server of the project. Total 3 windows. It was wrong decision because when I expand image its dimension changed and I had to resize everything? I can't open all three. I am working in a 13 inch screen laptop. Please help. How to manage all three??

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <div class="main"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

    To center .main on the page using flexbox, replace the height in the body with min-height: 100vh.

    This challenge does not require a box-shadow. Give the img a max-width of 100% instead of a width a height value.

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord