This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- HTML
- CSS Flexbox
- Mobile-first workflow
I'm using Flexbox to make the content/qr-component align both horizontally and vertically. Also to make the component consistent in mobile and desktop, I just using max-width here.
How I make the component sizes the same:
<section class="container">
<div class="qr-component">
<div class="qr-component-wrap">
<!-- img and text -->
</div>
<div class="attribution">
<!-- .... -->
</div>
</div>
</section>
.qr-component-wrap {
max-width: 370px;
/* .... */
}
and here the code for making the component align center horizontal and vertical:
.qr-component {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Well there is two things that still not comfortable:
- I just feel my HTML could be more less
- In my CSS, I think there could be another way to make it easier. Summary, sometimes when I write the code, I always think a better solution with less code. But I don't know what that is, because I also think this is the best solution that I can make.
- Frontend Mentor - @marudever
- GitHub - @marudever
- Twitter - @marudever