Submitted 8 months ago

QR Code Component - Refactor

melanielogan74•140

@melanielogan74

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Flexbox has not been my favorite, but for this project I feel more confident in using it. What I'd do differently next time is make the main background in the body of CSS rather than in the container

What challenges did you encounter, and how did you overcome them?

One of my challenges was with using margin and padding to make items align properly. To overcome this, I'd test margin and/or padding in a ruleset to see how it affected the content placement. This helped me to better understand how they work better.

What specific areas of your project would you like help with?

I'd like feedback on how others planned their project. For instance, I saw two different ways of going about making the background light blue. And sometimes it's in seeing more than one perspective that I got confused (with things like flexbox). How do you plan and focus to get projects like this completed?

Code

Please log in to post a comment

Community feedback

ardolynk-reborn•170

@ardolynk-reborn

Posted 7 months ago

Looks fine, but attribution section is offscreen (a bit of scrolling needed). You'd better place it into an external div with height: 100vh. My solution looks like:

  <div class="main">
    <div class="content">
      <div class="card">
        #card content
      </div>
    </div>
    <div class="attribution">
      #attribution content
    </div>
  </div>

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Marked as helpful

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