@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
- If you want, I recommend Flexbox as an idea for this solution as well as Grid:
- In order to center the card correctly, you'd better add flexbox and
min-height: 100vh
to thebody
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
/* min-width: 375px; */
}
- If you use flexbox in the
body
, you don't need to usemargin
in the.container
to center the card - If you use
max-width
instead ofwidth
, the card will be responsive.
.container {
/* margin: 5% auto; */
/* padding: 15px 0; */
padding: 20px;
/* width: 340px; */
max-width: 340px;
}
- In order to make the card centered vertically, you can reduce the
margin-top
of the.attribution
a bit:
.attribution {
/* margin-top: 100px; */
margin-top: 1rem;
}
Hope I am helpful. :)
Marked as helpful
@Prabhanjanmisra
Posted
@ecemgo Thanks, I just haven't learned flexbox and grid thoroughly and lack practice. I'll use them in upcoming challenges for sure.
@ecemgo
Posted
@Prabhanjanmisra
As I mentioned, it is an idea for you. After learning them, you can go back and review these suggestions. I definitely recommend you learn them because they provide great convenience as the project grows.
Marked as helpful
@Prabhanjanmisra
Posted
@ecemgo I did learn flexbox today, and understood how to center things correctly. Thank you so much for your help!!!
@ecemgo
Posted
@Prabhanjanmisra I'm happy to help ;)