For me, it was difficult to place all the design in the center, i'm still confused in what cases change the margin and in which ones changing the padding is better.
Also, I'm a little bit unsure if specifying the elements widht in px was better than in percentages; I noticed that when using pixels the design doesnt change if I shrink or enlarge the browser window.
You managed to center the item horizontally by using margin: 130px auto;, but vertically it will always be 130px from the top. To improve on this you can try using flexbox or grid. Both allow you to center elements. For this to work for your code, we will first need to change the body declaration to:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main-design {
background-color: hsl(0, 0%, 100%);
border-radius: 5%;
width: 265px;
height: 415px;
text-align: center;
}
Or you can choose to use grid:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
}
.main-design {
background-color: hsl(0, 0%, 100%);
border-radius: 5%;
width: 265px;
height: 415px;
text-align: center;
}
For this case I think it is better to go with a width in px, otherwise your card will shrink on smaller screens and we also don't need it to grow.
What is the best way to centralize the elements on the screen? Im looking for tips of good practices, because i'm starting my way as a web developer now.
You managed to center the card perfectly and it stays centered on all sizes, so good job.
Instead of using margin: 0 auto; you can use the flexbox property align-items: center;.
main {
height: 100vh;;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.secao {
width: 250px;
background-color: hsl(0, 0%, 100%);
border-radius: 10px;
padding: 15px 15px 30px;
}
In this case the main's flex-direction: column; can be left out because the default flex-direction: row; already allows us to center it with justify-content: center; and align-items: center;.
This would give us:
main {
height: 100vh;;
display: flex;
justify-content: center;
align-items: center;
}
You can also decide to use grid:
main {
height: 100vh;;
display: grid;
place-items: center;
}
.secao {
width: 250px;
background-color: hsl(0, 0%, 100%);
border-radius: 10px;
padding: 15px 15px 30px;
}
Also, I think moving box-sizing and font-family would be an improvement, since we want them to apply to all our elements:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
}
I recommend checking out https://mastery.games/flexboxzombies/ and https://cssgridgarden.com/ to learn more about flexbox and grid!
Just one suggestion I could think of atm:
To center the card and show the attribution under it, you can update the body's flex-direction to column and then add a gap to increase the spacing between the card and attribution elements.
What things can I improve in my design? Must I develop a mobile version? Do you have any suggestion or tip about best practice? Any advice is welcome. :)
Hi Anthony,
First, I suggest to use english class names that convey meaning to any future readers of the code. This way we can see a bit clearer what you are trying to accomplish.
Second, the card doesn't when I change the screen size, so try making it change the image and layout on smaller screen sizes.
Also, I notice that your image and your text both have a separate border-radius. So instead of the image and text part touching corners, they are round. Try giving the whole card a border-radius instead, so that only the card's corners are round.
Hope this helps!
