Skip to content
Submitted 4 months ago

QR Code styling (CSS style in HTML)

micfrazer•60
@micfrazer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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-mnPosted 4 months ago

    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

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