@huyphan2210
Posted
Hi @rkeppler42,
It looks like this is your first challenge, and you got the QR card 99% accurate to the design—congratulations!
I do have a few suggestions:
- You don’t need to add
width: 100vw
to thebody
because thebody
is already a block-level element, which naturally takes up the full width. Also, instead of settingheight: 100vh
, it’s better to usemin-height: 100vh
to avoid layout issues on smaller viewports (e.g., mobile browsers with dynamic address bars). - Consider using more semantic HTML instead of relying heavily on
div
elements. Semantic elements likearticle
,section
, ormain
provide better context for the content, improving accessibility. - While I don’t have access to the design file, your card looks nearly perfect. Keep in mind that the design may be optimized for specific devices, so it’s often the developer's job to make elements responsive. Rather than hardcoding
width
andheight
values, try usingmin-width
/min-height
ormax-width
/max-height
with specific values, while keepingwidth
/heigh
t relative (e.g., using percentages orvw
/vh
units).
Hardcoded Width/Height (Not Recommended)
.card {
width: 320px;
height: 499px;
}
Responsive Example (Recommended)
.card {
max-width: 320px;
width: 90%; /* Relative width, adjusts based on the screen size */
min-height: 499px;
}
Hope this helps!
Marked as helpful
@rkeppler42
Posted
@huyphan2210 thanks for your feedback! I really have to study responsiveness! I'm gonna take a deep dive!