Skip to content
Submitted over 1 year ago

QR Code Cards for Mobile and Desktop

star-369•280
@star-369
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 I have learned from this challenge:

  1. Mobile first!
  2. Centering items using position and transform property
  3. Apply only necessary changes to @media queries (thanks to @istealersn-dev)
  4. Using Github as junior developer
  5. Launch static website using Github Pages

My question to the community:

I'm actually struggling to center the item without using the position and translate property, so any suggestions from you guys ? (I know some technique with flexbox and auto margin)

Update Moving all my simple UI component to tailwind css, and try to re-design to make it look as similar as possible with the design(Update 3 Feb 24).

Community feedback

  • Stanley Nadar•370
    @istealersn-devPosted over 1 year ago

    Great efforts! Congratulations on completion of the challenge

    When you build HTML, its important that you get the semantics right as that boosts accessibility and SEO. In your page structure you're are missing heading; minimum of one <h1> is mandate as per web standards.

    On the CSS front:

    • You can center a container by using display: flex; justify-content: center; align-items: center; min-height: 100vh; - Here while you attempt to center, its important to specify the height for flexbox to understand the center axis and that's how it aligns at the center on the page. You can also use display: grid; place-items: center; height: 100vh
    • While using @media queries, you do not have to repeat the styles already declared. You must include only the change that's needed at the specified screen-width. For instance, repeating *, body, main, etc. are not needed instead only add the changes; example your img already has set of css properties defined, if you skip it in 900+ screen width, it will follow what you have defined for mobile

    Use this resource to read more on media queries

    Hope this is helpful!

    Marked as helpful
    2
    star-369•280
    @star-369Posted over 1 year ago

    @istealersn-dev thank you so much for your feedback! Especially for the @media queries, h1 tag for every page, and centering items using flexbox.

    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