Submitted over 1 year ago

QR code component using VS Code

Dani• 20

@didonatodani

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I am never really sure when positioning the elements in my code. I arrived to the desired design, but I feel I am a bit messy when doing so. Therefore, I would like to know if there is a simpler way to get to the final project. Cheers!

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

Now remove these styles, after removing you can able to see the changes

.qr-div {
   margin: 10% auto 10% auto;
}

Now your component has been properly centered

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Dani• 20

@didonatodani

Posted over 1 year ago

Thank you so much @0xAbdulKhalid !

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

HTML

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body
If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body {
  background-color: hsl(212, 45%, 89%);
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

When you use flexbox in the body, you don't need to use margin in the .qr-div to center the card
If you use max-width, the card will be responsive
You'd better update padding like below

.qr-div {
  background-color: hsl(0, 0%, 100%);
  /* width: 30%; */
  max-width: 300px;
  /* margin: 10% auto 10% auto; */
  /* align-content: center; */
  text-align: center;
  /* padding: 20px 20px 20px 20px; */
  padding: 20px;
  border-radius: 5%;
}

If you define repetitive styles such as text-align, font-family in the parent element, you won't define it again and again. Thus, your code will be clean.
You can update texts to avoid repetition in this way

h1 {
  color: hsl(218, 44%, 22%);
  /* font-family: "Outfit", sans-serif; */
  /* text-align: center; */
  /* width: 85%; */
  /* margin: 5% auto 5% auto; */
  font-size: 1.5rem;
}

p {
  color: hsl(220, 15%, 55%);
  /* font-family: "Outfit", sans-serif; */
  /* width: 60%; */
  /* text-align: center; */
  /* margin: 0 auto 0 auto; */
  font-size: 1rem;
  padding: 0 10px;
}

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Marked as helpful

Boluwatife Bonaventure• 550

@Boyutife

Posted over 1 year ago

Hi Dani 👋. Congratulations on successfully completing the challenge! 🎉

Job well done.

HTML: 🔖🔖🔖

You might want to wrap the entire content in a main tag due to semantic structure

 <main class="qr-div">

    </main>

CSS:🎨🎨

I recommend you use relative units. Relative units adjust to the font-size of the parent element, making your design more flexible and responsive to different screen sizes and resolutions. On the other hand, px units are absolute and do not adjust based on the parent element, which can lead to inconsistent sizing and spacing across devices.

To improve your use of relative units, I recommend using rem units for font-size values and em units for padding, margin, and width values. Rem units are relative to the root element, while em units are relative to the font-size of the parent element.

.qr-div {
  background-color: hsl(0, 0%, 100%);
  width: 30%;
  margin: 10% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 5%;
}

Changed align-content to align-items to vertically center the content within the container.
Changed auto 10% auto 10% to 10% auto for a simpler shorthand for vertical and horizontal margin.
Added display: flex and justify-content: center to horizontally center the content within the container.
Removed the 20px 20px 20px 20px shorthand for padding and replaced it with 20px for simplicity.

Hope am helpful.

HAPPY CODING

Marked as helpful

Dani• 20

@didonatodani

Posted over 1 year ago

Thank you so much @Boyutife !!! Your feedback was for real, totally helpful! For instance, I didn't know the existence of "display: flex;", so I'll look more into it. I'll take into account your corrections for this project and the ones to come!

Please log in to post a comment

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