Submitted 3 months ago

Responsible design using HTML and CSS. Git Gitbut and Github pages.

dominion-30• 10

@dominion-30

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

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

It has been a while since I built projects after learning HTML and CSS. When I started the project, I thought I could finish it in 24 hours, after I got stuck, I was thinking of going through the CSS course again, until I summoned courage and decided to do it step by step. I am so proud I was able to complete it. Still much work to be done, but it a start.

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

Centering of the image and div: I had to read different article on centering images and divs.

Creating the space on top of the QR-Code in Desktop and mobile view: The CSS was not responding, until finally I put the padding-top in the body

CSS not implementing: I discovered that after the mobile first approach, the root styling where my colors were, was in the mobile screen

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

How to center objects(images/divs) vertically?

How to place divs properly in the HTML?

Community feedback

mantis• 240

@morauszkia

Posted 3 months ago

I don't see your code, so I cannot comment specifically on your solution, but it is the easiest to center things using flexbox. You give a min-height to the container, so that it is higher than the content, and then you can center horizontally (supposing you kept the default arrangement, which is flex-direction: row) with justify-content: center and vertically using align-items: center. You have everything right in the middle.

Another solution, but a little bit hacky, and far more complicated than flexbox, would be absolute positioning either combined with transform: translate() or using calc() have the element right in the center. But nothing is easier than using flexbox.

Marked as helpful

dominion-30• 10

@dominion-30

Posted 3 months ago

Thank you for the comment, and sorry for responding late. The code is accessible, but you could also find it at this URL https://github.com/dominion-30/Project/tree/master/QR-Code

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