Skip to content
Submitted 4 months ago

Mobile-first design using CSS flex

BertSki90•30
@BertSki90
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 am proud to be able to centre the card horizontally and vertically on the screen. I would like to know different solutions on how to center the card horizontally and vertically on the screen.

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

Centring the card vertically on the screen was the more challenging part. I found articles on freeCodeCamp and W3 schools.

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

I want to learn more ways to centre a card on the screen.

Community feedback

  • Matt Pahuta•580
    @MattPahutaPosted 4 months ago

    Hi there. Nicely done completing this challenge. Your finished product is a close match to the design comp and you've included helpful custom properties. However, I see some issues that should be addressed for this project as well as some things to keep in mind for the future:

    1. You should always have a main element on the page, so good on that, but it should not be used here for the card component. Instead, nest a div (or possibly a section tag) within your main element as the card component.
    2. To answer your question about centering the card, you're actually already using a preferred method with your flexbox properties on the body. You can achieve the same result with CSS Grid but for this project, I think flexbox is the better way to go. For a deep dive into centering elements, check out this article on Josh Comeau's blog
    3. Get in the habit of including a modern CSS reset at the start of the styles. Andy Bell and Josh Comeau both have excellent resets you can google and use moving forward.
    4. Use min-height on the body instead of height. There are very few occasions when you'll set a predefined height on an element and this should definitely be avoided on the body.
    5. On the card itself (again, this should be a div, not the main tag) you don't need to use flexbox. With no orientation switch between mobile and desktop that needs managing and with just three elements within the card, margins and padding are all you need. The block elements within the card will stack vertically by default.
    6. You should use max-width for the card component, not width. Also, set this in rem units not pixels.
    7. The image shouldn't have a specific height or width. Instead, use max-width: 100% on the image.
    8. You have an invalid property on the h1 tag (weight). You're looking to use font-weight here.
    9. For better accessibility, font sizes should always be set using rem units not px.

    All in all, very nice work here and congratulations on completing the project. Good luck moving forward. Cheers!

    Marked as helpful
    1
    BertSki90•30
    @BertSki90Posted 4 months ago

    Thank you for taking the time to write this. This is very helpful for me. This will go into my notes. Thank you @MattPahuta !

    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