Design comparison
SolutionDesign
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code could be of interest to you.
- In order to center the card easily and correctly, you can add flexbox and
min-height: 100vh
to thebody
- If you want, you can use the recommended color for the background:
body{ /* background-color: aquamarine; */ /* padding: 50px; */ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background-color: hsl(212, 45%, 89%); }
- If you use flexbox, you don't need to give
margin
to themain
in order to center the card because flexbox in thebody
already provides it. Additionally, you don't needmin-width
. Max-width is usually used because it makes the card responsive.
main { /* margin: auto; */ /* min-width: 450px; */ max-width: 450px; /* padding: 25px 0px 10px 0px; */ padding: 25px 20px 10px; }
- If you give
width: 100%
andheight: 100%
to the image, the card will be responsive and the image will be positioned completely on the card
picture > img { /* margin: auto; */ border-radius: 15px; display: block; /* margin-bottom: 20px; */ /* max-width: 400px; */ height: 100%; width: 100%; }
- Finally, if you want to reduce the card size, you can adjust the max-width of the card and font-size of the texts.
Hope I am helpful. :)
0 - In order to center the card easily and correctly, you can add flexbox and
- @danyelvarejaoPosted over 1 year ago
Oi, vi que você é brasileiro, eu queria te ajudar com algumas dicas.
Tenta usar nome mais intuitivos para classes, vi que você utilizou os nomes
alto
ebaixo
nas suas tagsh1
ep
, você poderia utilizar algo comotitulo
outitle
na tagh1
edescricao
oudescription
na tagp
.Vi também que você utilizou a propriedade
padding
para dar espaçamentos externos entre os items, existe uma propriedade chamadamargin
que serve para isso.Espero ter te ajudado!
0
Please log in to post a comment
Log in with GitHubJoin 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