Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

First change with Git

@SoleFernandez

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I've ordered the classes and I think that the code is better now. Next time I'll take more time to oreder the structure.

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

The challenge that I encountered was the width and the height.

I think that I could resolve the width, but I'm not sure about the height.

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

Please, I need some help with the height and how to center the image. I'm not sure about it...

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello, @SoleFernandez!

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

I hope you find this helpful!

Keep up the excellent work!

Marked as helpful

1

@SoleFernandez

Posted

Hi @danielmrz-dev !!!

Thank you very much!! I think that my code is better now. I have to practice hardly...

Thank you again!!

1

@30vam

Posted

You could make the body element a flexbox and center the card div in the middle like this:

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

min-height: 100vh; //This sets the height of the html body to the actial viewport size of the browser }

I don't think it is necessary to make the div card a flexbox.

Marked as helpful

0

@SoleFernandez

Posted

Hi @30vam!

I appreciate your feedback, I've tried to center the elements without the min-hight, but it didn't work. I don't know why.

Thank you very much!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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