@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!