@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
CSS π¨:
- You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
-
You should use the
box-sizing: border-box
property to make thewidth
andheight
properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here π.Your styles indicate a width of
width: 300px;
for the component, but if you inspect the element, the actual width is 332px, 32px more that are part of the padding and border.
-
Update the image selector to make responsive images.
.card { /* NOTE: Only use the card selector here */ border-radius: 0.75em; width: 300px; } img.qr-code { max-width: 100%; display: block; }
I hope you find it useful! π
Happy coding!
Marked as helpful