Lucas 👾• 104,420
@correlucas
Posted
👾Hello Iam, congratulations for your new solution!
For this challenge you don't really need to usa a framework, because its simple to build it, using something like bootstrap will be like killing a pigeon with a bazooka. All you need to make this card responsive is to make the image responsive using you need to add max-width: 100%:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
And use max-width: 320px instead of width: 320px to allow the card to contract while the screen scales.
Even the HTML structure is simple, all you need is a single block element to hold everything, like <main>, see the structure below:
<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>
👋 I hope this helps you and happy coding!
0
