I found it very difficult to keep my card in the centre of the page. What I am more concerned about is how I made the page responsive. This is my first project (ever) and so I am hoping to get back feedback on how I made my page responsive and where I need to improve for best practices.
@Source-Web
Posted
To get the card to the center of the page, give it a specific width and set the margin to auto...
What I did was get the card width and margin top and bottom then my code looked like this: .card { width: card width; margin: top-bottom auto; }
Marked as helpful
@MacChristo
Posted
if you are having issues with responsiveness, I think this might be able to help you.
Marked as helpful
Account Deleted
Hey 👋,
Great work on this challenge. Centering an element can be tricky but you have managed to do it in your solution. There are several ways to center an element. Using position: absolute; is one of them however it can be tricky to keep it consistent. I would recommend using flexbox. You can center an element by applying the following properties -
.center{
display: flex;
align-items: center;
justify-content: center;
}
Depending on the direction of your flex row | row-reverse | column | column-reverse the snippet above should help center the element both horizontally and vertically. You can read more about flexbox here
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
