@R3ygoski
Posted
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,
paddingis one of the best options. I'll briefly explain the different types of spacing. In CSS, we have three main ways to space elements.
margin, which is a type of spacing used to push elements away from each other.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 withpadding, which is practically a fill.gap, which is used withdisplay:grid;anddisplay: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
@ismeh
Posted
@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.
@R3ygoski
Posted
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.
