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

QR code component

MH-Rashid 50

@MH-Rashid

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?

Made an effort to condense code as much as possible

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

I managed to center the "main" element horizontally on the page but struggled to do so vertically. I tried the same approach as for horizontal centre alignment, i.e. specify give an exact height then set margins to auto, thinking it would work the same way but it didn't. When I set the vertical margin to auto it just removed all the vertical margins.

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

Couldn't find anything online regarding the vertical centring. Ended up having to define exact vertical margins to get it looking centred.

Any ideas, please share

Community feedback

@DomilsonFirmino

Posted

One way you could use to center the content is html, body{ height: 100% } //This will make you the html and body take all the height available

body{ display: grid; place-content: center; }//with the body taking all the height availably this will center it, you can also do the same with flexbox

and remove the margin and height from the Main tag - After that you no longer need this part

I advise you to search about css resets, and to use the inspector it gives good hints about the tags behaviors, I hope that i could help you

Marked as helpful

1

MH-Rashid 50

@MH-Rashid

Posted

@DomilsonFirmino Thanks for the feedback, much appreciated. I had to do a bit of digging for the centering, but your approach of setting body display to grid is interesting 👍

0

@DomilsonFirmino

Posted

@MH-Rashid I am glady if a could help, centering content is one of the most annoying things to do

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