Responsive page usign Mobile First design and display flex

hello @iago-monteirog, heres some suggestions regarding your layout:

-in terms of width you can make your components fully responsive using only two lines of code and no media queries, you can use the following hack:

.container {
   width: 90%;
   max-width: 600px;
}

-the image in the header should have the width: 100%; also here object-fit: cover; is a good use case.

-i invite you to read up on the <picture> element as this is a good use case for it instead of the image tag, heres a helpful article: The picture element

i hope you found my suggestions helpful!

Hi Iago, you can try <picture> tag in HTML which can load different image url in different resolution.

This is my case,

<picture>
      <source media="(min-width: 40em)" srcset="images/image-product-desktop.jpg">
      <img src="images/image-product-mobile.jpg" alt="Perfume_image"/>
</picture>