Design comparison
Solution retrospective
padding and margin are quit a headache. fixing the width was super difficult. How can i get the view width in the media quarry as variable to scale the container down?
Community feedback
- @vanzasetiaPosted about 2 years ago
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 thetransform
properties.Never limit the height of the
body
element. It will not allow the users to scroll the page if the page content needs moreheight
. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to usemin-height
instead.Hope this helps!
Marked as helpful1@rynex-zvPosted about 2 years agoIt'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!
0@vanzasetiaPosted about 2 years ago@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).
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord