Frontend Mentor | Product Card Preview Using HTML and Tailwind CSS coding challenge solution

Community feedback

@danielmrz-dev

Posted 7 months ago

Hello @adityas-github!

Your project looks great!

I have one suggestion for you to improve it even more:

Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

Using Tailwind, that would be <body class="min-h-screen flex justify-center items-center">.

I hope it helps!

Other than that, great job!

@adityas-github

Posted 7 months ago

@danielmrz-dev Thank you for your suggestion. I am glad that you like my work. I assure you that I will fix it.🤗

Product Card Preview Using HTML and Tailwind CSS