@correlucas
Posted
👾Hello Alex, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
Great great solution! Its everything good made here, you've the card component design matching all requirements, component and image fully responsive. The only thing about responsiveness you can improve is to add a margin to main like margin: 20px to avoid it touching the screen edges and reduce the code.You can build this with a simple approach, without using unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.
See the structure below:
<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>
👾My rating for this solution: ⭐⭐⭐⭐⭐
👋 I hope this helps you and happy coding!
Marked as helpful
@Alexr6667
Posted
@correlucas Thank you for the detailed review. The explanation about simplifying my code was really helpful. I am a little confused at your description of adding 20px of margin to the main. Could please explain this further?
@correlucas
Posted
@Alexr6667 When you scale the window the content start to get narrow and the card start to touch the screen edges, to avoid that you can a margin: 20px to create a gap between the card and the screen bound.
