Responsive Landing Page using HTML and CSS

👾Hello Mario, congratulations for your new solution!

I saw your solution and the code, I've some tips for you:

You don't need to use too much stuff to build this card, for example, you don't need many divs here, you can have the component with a single div holding everything (h1, img, and p).

To have your component responsive, pay attention that you've add many properties for the width the CSS recognize only one, so prefer to use max-width for a responsive card, if you add width it gets a fixed size and don't behave flexible.

.main_container {
    /* position: relative; */
    max-width: 320px;
    /* min-width: 280px; */
    /* max-width: 328px; */
    background: var(--white);
    /* margin: 20px; */
    padding: 20px;
    border-radius: 14px;
}

👋 I hope this helps you and happy coding!

Congrats on completing this challenge!

Some suggestions:

Remove the your width: 87.5% and min-width: 200px from your main-container class. You already have a max-width: 328px, no need for additional widths.

For your image, delete everything except for width: 100% and border-radius: 8px.

Keep up the good work!