@correlucas
Posted
πΎHello @CarvalhoVincent, congratulations for your new solution!
Your solution is already really good, the reason that its not responsive yet is due the width
inside the container, button, header and pricing section, note that width
is a fixed property this means that the size value doesnt change, instead use max-width
this way you make these elements to have a maximum size but have the ability to decrease its size.
To make your image fully responsive add display: block
and max-width: 100%
and object-fit: cover
to make the image auto-crop when resizing inside the column:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
π I hope this helps you and happy coding!
Marked as helpful
@CarvalhoVincent
Posted
Hello @correlucas and thank you for your comment, it helps a lot! I will try your suggestions in my next challenges. Happy coding!