QR-Code

Great work 👍🏽

Few suggestions

You don't need to specify display: block everywhere. Remove it from all elements except img and you won't see any difference.

I see you are specifying margin: 0 auto in lot of places. I understand you are trying to center things but as Abdul mentioned in his comment, there are better tools to center elements in css.

I see you specified padding for img and p element to keep them inside the wrapper. The best solution is to just give padding to wrapper itself and all elements will stay inside that padding.

.qr-wrap {
padding: 15px;
}

I hope you find this useful. Best of luck.

Hello Cindy, I think you have done a good job.

One thing I learnt when I posted my is what I want to share with you to do.

Semantics

Instead of using <div> tag around the the <img> tag, you could use <figure></figure> tag for that.

Redundant code

It will be appropriate to remove redundant code from your work to make it look clean. specifically this block of code below

Again, the alt on the <img> tag should not have _ or - or stuffs like that. The reason why underscores and hyphens should not be used in the alt attribute is that screen readers and other assistive technologies may interpret these characters as spaces or punctuation, which can affect the way the text is read out loud or displayed to users. For example, if the alt attribute value is "red_apple", a screen reader may interpret it as "red apple" instead of "red_apple".

Finally, It will be appropriate to have the README.md file update so it gives full enough information about your work.

I hope it helps

Happy coding

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component.

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

• Now remove these styles, after removing you can able to see the changes

body {
  margin: 0 auto;
}
.qr-section {
  margin: 0 auto;
  padding-top: 150px;
}
@media (max-width: 675px) {
  .qr-section {
    margin: 80px 10px;
  }
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!