Responsive QR-code-component

Hi @Danashu,

Nice project! If you want more variation in your design, consider starting with a 375px size and then adding media queries to make your desktop design a bit more different.

For this project, though, I think you’ve done a good job and would recommend moving on to a harder challenge or the next level.

I hope this was helpful!

Best, Teodor

Hello @Danashu,

Regarding the areas you want help with, its unlikely you'll get a perfect match each time, and in this case not the point of the challenge. You did very well and should be proud of yourself! Your solution is really close to the challenge design, so great job!

If you want a tip, for the bottom card <p> element of the class "card-body", you could increase padding-left/padding-right or font-size just a little bit to get the text to closely match the layout of the given design. Also if you're concerned about the distance between the QR code image and the text just below it, try reducing the top or bottom margining/padding on either of the 2 elements-- however yours is very close.

Something else to mention is to set the base margining/padding to 0 in the * css selector at the top of your file- if this is confusing, think of it as the same as your body or root, however its a good foundation for the rest of your styling, may help with any bugs/weird css, and looks like this: (for some reason its a dot on my comment, but it should be an asterisk).

• { padding: 0; margin: 0; box-sizing: border-box; }

Also to note, the box sizing of "border-box" nicely keeps child elements in their respective parent element's container and doesn't allow overflow.

Anyway, I just wanted to say congrats, and may your Front-end journey go well!

I hope this was helpful!

Regards, JT M.