Skip to content
Submitted 3 months ago

Basic QR code component

Ismael•30
@ismeh
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'm happy with the result.

Next time I would like to implement the component in react.

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

I had problems with:

  • Resizing the card with the image
    • I solved it using max-width in px in card class
  • Placing the card in the middle of the screen
    • Solved it with min-height on body
      • Had to use a value lower to 98vh to avoid scroll bar (overflow) and high enough to fit the card in the center of the screen.
  • Adjusting spacing between text
    • I just created 2 little classes to modify top and bottom margin
What specific areas of your project would you like help with?

I have some questions in the following topics:

  • It's fine to add/modify body style?
    • As I did to solve 2nd problem
  • There is a better solution to fix spacing between text and card?
    • Maybe inline style on instead of 2 one line classes on stylesheet?
  • Should I add always min-width to my componenets in order to meet small screen (320px) requirements (WCAG (I didn't read the guidelines only the tip))

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 3 months ago

    Hello Ismael, congratulations on completing your project.

    First, I will address some things you mentioned in the "What challenges did you encounter, and how did you overcome them?" section. The difficulty you had, where you need to use less than 100vh, is happening because you didn't reset your project. Whenever we start a project, it's ideal to do a complete reset, and you do this by using this snippet in your CSS:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    In summary, the * selector is a global selector, for example, the margin:0; will be applied to all elements of your HTML, from <html>, <body>, and the rest.

    So, if you do this reset, you will need to pass the centering part to the <body>, like this:

    body {
    background-color: #D5E1EF;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    Regarding the way you handled spacing, it isn't wrong, but there is a simpler way to achieve that spacing, which would be using a padding for your div.qr-card, so you wouldn't need to apply margin on the image and the last text. Note that to do this, it's recommended to reset as explained above, so the texts don't have a default margin from the browser, which will allow you to manage the spacing better.

    Now I'll answer the questions you have:

    • Q: It's fine to add/modify body style?
    • A: Yes, you can modify the <body> without any problem. We usually do this to center components, like in this current challenge.
    • Q: There is a better solution to fix spacing between text and card?
    • A: Yes, padding is one of the best options. I'll briefly explain the different types of spacing. In CSS, we have three main ways to space elements.
    1. margin, which is a type of spacing used to push elements away from each other.
    2. padding, used for internal spacing. In this current challenge, if you notice, you need to add spacing between elements and the edges, and this is done with padding, which is practically a fill.
    3. gap, which is used with display:grid; and display:flex;, providing equal spacing between all elements.
    • Q: Should I always add min-width to my components to accommodate small screens?
    • A: We use min-width and max-width to set limits for our elements, allowing them to expand or shrink to a specific point, which makes creating responsive layouts much easier. Is it always necessary? No, but sometimes it is, especially for smaller screens, as it allows you to set the minimum size it should shrink to, preventing layout breakage.

    That's it! Once again, congratulations on completing your project. It turned out really well, keep practicing and improving, and if you have any questions, feel free to comment below.

    Marked as helpful
    1
    Ismael•30
    @ismehPosted 3 months ago

    @R3ygoski Hello Bernardo, I am very happy and grateful with your detailed response.

    I've been reading about CSS resets and normalizers, I'm still not sure which technique is better.

    I have read about Eric Meyer's reset. The 'normalize.css' project on github and some more resets like this or this other

    It seems that the resets are usually simpler and more suitable for small projects and the normalizer for large projects, so I think I will start using the fragment that you have shared with me that is usually common among the resets and maybe later I will add more content to the reset .

    In the case of working with either of the two methods, should I have two style sheets, one for the reset and the other for my styles? Or I should work only with one file.

    1
    Bernardo Poggioni•5,360
    @R3ygoskiPosted 3 months ago

    Hello again @ismeh.

    Regarding reset and normalize, the difference between them lies in their purpose. Normalize ensures that styles remain consistent across browsers, preventing situations where a button looks one way in Firefox and different in Chrome, for example. On the other hand, reset removes default styling, such as padding, margin, and some other properties that come by default.

    • Q: In the case of working with either of the two methods, should I have two style sheets, one for the reset and the other for my styles?
    • A: Definitely, this will make your project much more organized.
    1

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