Skip to content
Submitted over 1 year ago

QR Code Component using CSS Flexbox

Saumya Ranjan•10
@saumyaranjan1111
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it difficult to shrink the image size down to fit to the outer card div. I want to know if there was a better way to do this project only using flexbox and grid and using as less native css styling as possible.

Community feedback

  • Jeet Gangwar•160
    @i-amWinPosted over 1 year ago

    You can do something like this

    HTML:

    <div class="card">
<img src="./images/image-qr-code.png" alt="qr code" class="card__img" />

<div class="card__content">
</div>
</div>

    CSS:

    img {
display: block;
max-width: 100%;
}

.card {
width: min(335px, 100% - 2rem);
background-color: hsl(0deg, 0%, 100%);
padding: 1rem;
border-radius: 1rem;
}
.card__img {
width: 100% /* Optional, if width of img is less than width of card */
border-radius: 10px;
}
    Marked as helpful
    1
    Saumya Ranjan•10
    @saumyaranjan1111Posted over 1 year ago

    @i-amWin Thank you for reading my code and commenting, I hadn't thought of making it a block and then limiting the max-width of the img. Thanks again!

    0

Please log in to post a comment

Log in with GitHub

Join 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