Vanza Setia• 27,795
@vanzasetia
Posted
Hi, @steeven509! 👋 Welcome back to coding! 😄
I have some suggestions to improve this solution.
- Remove
<div class="qr-block-img">. Make the<img>as a block element and set the styling to the image directly instead of using<div>. - Improve the alternative text of the QR code by describing the purpose of the QR code. "QR code to frontendmentor.io" can be a good alternative text for it.
- Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
- Remove
height: auto;andoverflow: hidden;from the.qr-containerstyling. It is because:- For the height, by default, the height of the element is set to
autoand - For the
overflow, there is no issue whether the property is there or not.
- For the height, by default, the height of the element is set to
- Never limit the height of the
<body>. It will not allow the users to scroll the page when the page content needs more height. Try to look at the site on a mobile landscape view to see the issue. So, usemin-heightinstead. - Never use
pxunit for font sizes. Useremoreminstead. Relative units such asremandemcan adapt when the users change the browser's font size setting.
I hope you find this useful. 🙂
Marked as helpful
1
steevencode• 120
@steeven509
Posted
@vanzasetia it’s very helpful my friend how can i keep in touch with you on other social networks
0
Vanza Setia• 27,795
@vanzasetia
Posted
@steeven509
I am available on the following social media platforms:
- Vanza Setia (@vanzasetia) / Twitter: I often share what I've been working on or resources.
- Vanza Setia | LinkedIn: I usually chat with people here. So, if you want to message me then this is the best place. I also share what I've been working on here.
P.S. I notice that we have connected on LinkedIn. 🙌
Marked as helpful
1
steevencode• 120
@steeven509
Posted
@vanzasetia thank you
1
