Skip to content
Submitted 6 months ago

QR code component

RoxanaAnamariaTurc•40
@RoxanaAnamariaTurc
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am refreshing my skills after holidays and I am happy to see that they are not so rusty. Even if this is just html and css it felt good to complete it and feel the reward of a task done.

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

This challenge was quiet easy, what I research about a bit was the media queries , but then I realise I dont need it with the flexbox as when I tested the component on a smaller screen was looking as expected.

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

Feedback is always appreciated. If I can write the styles in a more elegant way or the html itself, I would like to hear opinions.

Code

Please log in to post a comment

Log in

Community feedback

  • Keith•190
    @KeithEsc

    Nice work. I messed with your CSS a bit to center the positioning of the component:

      html, body {
  background-color: #d5e1ef;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

img {
  width: 288px;
  height: 288px;
  margin-bottom: 24px;
  border-radius: 10px;
}

section {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: hsl(0, 0%, 100%);
  padding: 16px 0 16px 0;
  width: 320px;
  border-radius: 10px;
}

h3,
p {
  text-align: center;
  font-family: "Outfit", serif;
}

p {
  size: 15px;
  color: hsl(216, 15%, 48%);
}

.attribution {
  text-align: center;
  size: 10px;
  color: hsl(216, 15%, 48%);
}

    • Main changes are assigning html and body a height. Which then lets your <main> take up the entire height of the screen. This allows justify-content: center; on <main> to center your <section> vertically.

    • flex; 1; changes the behavior of justify-content so I went ahead and removed it. It also didn't impact the design as far as I could tell.

    You could opt to use a <div> with the class of "container" instead of styling a <section> tag (then move your CSS to .container). This is what people would normally suggest.

    Marked as helpful
  • Saeed Abedini•80
    @Saeed-Abedini

    Everything is great, but compared to the design pattern, it is not vertically in the middle of the page and the footer should also be at the bottom of the page.

    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