Responsive card using HTML and CSS

👾Hello @etherubn, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

✌️ I hope this helps you and happy coding!

can u try centering it with

     margin: 0 auto;

or with flexbox

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

Hello Ruben, You have done a good work! 😁

Some little tips to improve your code:

• add main tag and wrap the card for improve the Accessibility
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!