@Aimal-125
Posted
Bro use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Or display: flex; justify-content: center; align-items: center;
Marked as helpful
I'm starting in css and what I felt the most difficulty with was centering the div.
@Aimal-125
Posted
Bro use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Or display: flex; justify-content: center; align-items: center;
Marked as helpful
@Moses2308
Posted
Hello, Knowing you're starting out with css is helpful context for this project. There are a couple of things to note about your project.
TLDR
For further development look into the following topics: CSS BEM, Responsive Design, Relative and absolute units, and Semantic HTML.
HTML
CSS
Resources
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw https://developers.google.com/fonts/docs/getting_started https://css-tricks.com/bem-101/
Marked as helpful
@hitmorecode
Posted
Congratulations on your effort well done. Here are a few changes you can do
<body>
<main>
<div>
place your content in here
</div>
</main>
</body>
body{
display: flex;
width: 100%; /* you don't need this, remove it */
height: 100%; /* change it to min-height: 100vh. this will place your card in the middle of the page */
background-color: #d5e1ef;
justify-content: center;
align-items: center;
}
div{
background-color: white;
width: 280px;
height: 450px;
margin-top: 10%; /* because the card is already positioned with flexbox, you don't need this. Remove this line, this line causes other problem. when going to small screen size, the card will move upwards */
border-radius: 20px;
box-shadow: 0 6px 10px rgba(128, 128, 128, 0.219);
text-align: center;
}
/* You defined the same font-family in two different places. You don't have to do this, just place the font-family on the body and it will apply for the entire page */
div h2{
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: bold;
color: #1d2a4a;
padding: 0px 30px 0 30px;
}
div p{
color: gray;
padding: 0px 30px 0px 30px;
font-size: 14px;
font-family: 'Outfit', sans-serif;
}
One more tip, for this challenge is not that important due to the size of the content. For next challenges try to use more classes and / or id's. When the markup gets larger it will be hard to just style a div with css. If you have multiple layers of div's it will be more work to style them with css.
Keep it up 👊
Marked as helpful
@Thewatcher13
Posted
Hi
I've a few things to say:
html
css
Marked as helpful
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