@vanzasetia
Posted
Nice work on this challenge, Rynex Akil! You managed to get the HTML right! It's rare that people can get it right! Good job! 👍
I recommend improving the alternative text of the QR code image. Alternative text should not be hyphenated and it should not contain the word "image". So, the better alternative text is something like, "QR code to frontendmentor.io".
For the media query, there's no need for media queries to make this responsive. The card only needs a max-width to prevent it from filling the entire page. Also, remove the transform properties.
Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
Hope this helps!
Marked as helpful
@rynex-zv
Posted
It's the first time i do this kind of challenges, I was trying to git it as perfect as the reference 🥲. You are right about the alternative text of the image, but sometimes it just don't click. My question about the media query not specific for this demo, but as an idea without the JavaScript!
I added the transform property to give it the same look but a bit smaller at 370px. I know it doesn't need it bu the gab in the phone reference was a bit bigger.
@vanzasetia thanks for the tips!
@vanzasetia
Posted
@rynex-zv
About the media query, it looks like the container query is something that you need. But, it is not getting support yet. So, we can only use the media query based on the user's viewport.
For the styling, I was thinking the desktop and the mobile have the same styling. That's why this challenge is perfect for anyone who doesn't know about building responsive layouts yet (because it doesn't need a media query to complete the challenge).
