Skip to content
Submitted about 2 years ago

QR Component

Iam Johnson•40
@ultraiam
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 feel like this page could be more responsive using bootstrap, but I'm trying to stay away from frameworks at the moment while I get more proficient at using CSS. If there's anything in the code I can improve please feel free to let me know.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Iam, congratulations for your new solution!

    For this challenge you don't really need to usa a framework, because its simple to build it, using something like bootstrap will be like killing a pigeon with a bazooka. All you need to make this card responsive is to make the image responsive using you need to add max-width: 100%:

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

    And use max-width: 320px instead of width: 320px to allow the card to contract while the screen scales.

    Even the HTML structure is simple, all you need is a single block element to hold everything, like <main>, see the structure below:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    👋 I hope this helps you and happy coding!

    0
  • Luigi•240
    @luigi-peronePosted about 2 years ago

    Hi Iam, and welcome to the Frontend Mentor community

    You've a great solution here but there are some tag you can consider changing in the html,the first div should be wrapped with a main tag and div with class attribution should be wrapped with a footer tag. These changes don't change the design but improve the accessibility and semantic.

    Hope it helps, happy coding 👋

    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