QR Code Component - HTML and CSS only.

Hello, I like your work. But when playing with my screen width, your typography is not correct (check 590px) and your image may shrink as the screen width grows. Also, I recommend removing the query "(max-width: 1900px)" from media queries.

It would be much better if you fix them. ✨

Hey @NickTalvy,

Awesome work on finishing the project, despite the challenges you had.

In the future I would recommend starting with the mobile design first. I find it to be simpler to manage things like spacing when the viewport is smaller. And things get more complex as you increase the viewport. With that said, you may only have to do one MQ instead of two when you're expanding the viewport in the future.

Hey @NickTalvy,

Congrats on finishing this project, it looks good!

I did notice however that your image isn't showing up. If you change the following code.

<img src="/images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

to

<img src="images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

Your image should start working, I simply removed the / in front of the path, so it's being directed correctly.

Secondly I checked out your css, and noticed you selected elements directly several times like so.

p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

While this is fine for a smaller project like this, I would strongly advise against doing this in larger projects, as it will cause a LOT of headache. I would instead suggest selecting every element, with either a class or with a class and then the element directly. For instance instead of selecting the p directly you could do the following.

.card p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

This way only the p elements inside of the element with a class of card will be selected.

Hope this helps, and keep up the great work!

Check out my code for help.

https://github.com/covstar/qr-code-component-solution

Let me know if it was helpful.