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 styling (CSS style in HTML)

micfrazer 60

@micfrazer

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 remembered quite a bit for being rusty. I would, however, look at examples first rather than jumping right in.

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

Positioning is not my forte; I welcome suggestions for responsive positioning of objects/divs.

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

Again, my particular concern is responsive sizing and/or positioning.

Community feedback

z-mn 150

@z-mn

Posted

To answer your question, in order to position the .object div in the centre for all screen sizes you should use display: grid on the parent container (in this case the body) and the place-items: center property. Alternatively you could use display: flex with the justify-content: center and align-items: center properties. This is better than guessing values for one screen size which looks like what you've done, and ensures it is at the center regardless of screen size.

You could also import the correct font by going on google fonts and copying the embed code. Otherwise, good job! :)

Marked as helpful

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