Design comparison
Solution retrospective
I got the desktop version right but for the mobile version I failed to figure it out for the responsiveness
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi wani,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<main>
for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
not describes the image.
- In order to center the card on the middle of the page , you can use the flex or grid properties and
min-height: 100vh
to the<body>
. Add a little padding to the body that way it stops the component from hitting the edges of the browser.
Hopefully this feedback helps.
Marked as helpful0 - You should use
- @correlucasPosted about 2 years ago
👾Hello Wani, congratulations for your new solution!
Your component is perfect, but its not responsive yet. To fix this behavior all you need to do is replace the
width
withmax-width
. Note that the difference between these two properties is thatwidth
is fixed, example,width: 320px
is an container that doesn't get bigger or smaller than320px
butmax-width: 320px
have the maximum of320px
and can contract when the screen scales down and adjust its size and use relative units asrem
orem
instead ofpx
to improve your performance resizing fonts between different screens and devices.✌️ I hope this helps you and happy coding!
Marked as helpful0 - @MahdiSohailyPosted about 2 years ago
The problem is, that you have used
height: 15%
andwidth: 20%
. so on the small screens, the 20% will be so tiny. to solve this you have to define a media query for the small screens, or you have to use themax-width
property with themin()
function.max-width: min(400px, 90%) height: auto; margin-inline: auto;
If it was helpful, mark my comment as helpful.
Marked as helpful0 - @DavidMorgadePosted about 2 years ago
Hello Wani, congrats on finishing the challenge! let me try to help you with your problem
The issue here is that you are setting the
width
to a % and thats scaling with the viewport meaning that at lower screens the component will stretch proportionally, instead of that try using a relative unit like rem, change it from % tomax-width: 15rem
why max-width? because with max-width you ensure that your container is not gonna overlap from the screen!Apart from that I could also recommend you centering your component using flexbox on the parent element instead of margins on your
first-part <div>
, you can do it just setting themin-height
of the body to 100vh, and then using flex-box to centering like this:body { text-align: center; background-color: hsl(212, 45%, 89%); font-family: Outfit, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Try it at your own and tell me how it goes!
Hope my feedback helps you, if you have any questions, don't hesitate to ask
Marked as helpful0
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