Submitted almost 3 years ago

HTML and CSS

@ambmamo

A solution to the Product preview card component challenge

Solution retrospective

I found positioning difficult. The text part of the project. I'm not sure it's arranged well. I want to know the best practice for positioning and arrangement in a webpage like the one I'm submitting.

Code

Please log in to post a comment

Community feedback

David•7,960
@DavidMorgade
Posted almost 3 years ago
Hello and congratulations on finishing the challenge!

In this case and in many challenge from frontendmentor you have to center the component in the middle of the screen, you can get this with just a few lines of CSS.

Remove the margin from your outer-div, and add to the ´body´ a height of height: 100vh.

Then with this you just need to use flex to center your component, give your body this:
```
body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
```
Using this little trick you will be able to center the component on the screen, use this for your future projects here!

Hope my feedback helps you!
Marked as helpful

Join 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