Skip to content
Submitted about 2 years ago

QR code component using HTML and CSS

Ejc2us10•30
@Ejc2us10
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

Should the "main" tag contain the whole "card" or should it contain only some part of the content in this case?

Community feedback

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

    👾Hello Ejc2us10, congratulations for your new solution!

    👋 Answering your question:

    Yes you can keep everything inside the tag <main>. I've a tip for you about cleaning your code:

    Clean the html code removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    A good structure should look like this":

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

    👋 I hope this helps you and happy coding!

    Marked as helpful
    2
    Ejc2us10•30
    @Ejc2us10Posted about 2 years ago

    @correlucas Thank you for your advice!

    0
  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello man congrats on finishing the challenge!!

    In this case as an isolated component, it sould be contained on a main tag and separated in sections to have a correct structure of your html

    In a real web page, if this component is a part of it, it will probably be the best to define it as a different section.

    Hope my answer helped you!

    Marked as helpful
    1
    Ejc2us10•30
    @Ejc2us10Posted about 2 years ago

    @DavidMorgade Thank you!!

    0
  • Ejc2us10•30
    @Ejc2us10Posted about 2 years ago

    I've uploaded the revised version of the same task with the advice of @DavidMorgade and @correlucas (thank you!). Also, I added the box shadow, which I didn't realize at first.

    Solution URL: https://github.com/Ejc2us10/QR-Code-Component-revised-

    Live URL: https://ejc2us10.github.io/QR-Code-Component-revised-/

    Additional question: how can I place the cardto the center of the screen? Mine is above the center, but I want it to be displayed in the middle of the screen (for your referrence, I used "margin: 50px auto;" to the main tag in CSS).

    0
    David•8,000
    @DavidMorgadePosted about 2 years ago

    @Ejc2us10 You can do it using flex-box in the body.

    First of all remove the margin from your main.

    Since you already have flex in your body, change the justify-content of your body to center.

    body  {
 display: flex;
 align-items: center;
 justify-content: center;
}

    You just need to add to your body a minimum height of 100vh like this min-height: 100vh. And it should be working.

    I did a pull request to your github repository, so you can see the changes more clear!

    Marked as helpful
    1
    Ejc2us10•30
    @Ejc2us10Posted about 2 years ago

    @DavidMorgade I tried it on my files and now it looks much better. Thank you so much! :)

    1

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