HTML, CSS, Responsive

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component.

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

• Now remove these styles, after removing you can able to see the changes

main {
  margin: 6% auto 5%
}

• Now your component has been properly centered, my additional suggestion would be to using relative units like em, rem for width of main instead of using percentage(%)

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi, Great work in finishing this challenge!! To your question, I think the problem lies with your main tag.. you set your main tag's width to a percentage. using a percentage in width will stretch your container as the screen gets bigger.. so if you want it to be at fixed size. you should consider using a fixed size also.. I would suggest using the 375px for the max-width for mobile.. then for wider screens you can use 567px or 768px so it would not stretch so much. Hope this will help fixing your problem. Happy Coding!!

Nice well done. I opened your page in Firefox and everything seems fine even in mobile screen size. I do have some tips

• Make it a habit adding min-height: 100vh; on the body and use flexbox or grid to place the card in the middle of the page. If you do this you can remove margin on main
• As for the image overlay add mix-blend-mode: multiply; and set the hsla alpha channel to 0.8. This will match the overlay on the design file.