@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
The solution looks much better now, I just have a few small suggestions.
HTML ๐ท๏ธ:
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS ๐จ:
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
-
Avoid using
position: absolute
to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here ๐.Here is an image of how it would look on a mobile device (taking into account the scroll): screenshot-imgur ๐ธ
Result using grid layout:
.outer-frame { background-color: hsl(212, 45%, 89%); /* position: relative; */ /* height: 100vh; */ /* width: 100vw; */ /* margin: 0; */ min-height: 100vh; display: grid; place-content: center; } .inner-frame { background-color: hsl(0, 0%, 100%); /* position: absolute; */ min-height: 428px; max-width: 275px; /* top: 50%; */ /* left: 50%; */ border-radius: 17px; /* transform: translate(-50%, -50%); */ text-align: center; }
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful