Simple portrait responsive card using media query

Hello João Oliveira 👋

You are not doing anything wrong, that's the expected behavior. I was also a bit confused about the use of rems in media queries when I was watching a tutorial on CSS media queries by Coder Coder. So I searched online to see if anyone else has come across this issue and here is what I found:

rem is one of many relative units in CSS, which means it is relative to something else, perhaps the size of the parent element's font, or the size of the viewport. In the case of rem, it is relative to the font size of the root element that is matched by the :root pseudo class or the html selector.

So now here is where things start to get interesting. According to section 1.3 of the media queries spec, relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

So since rem is also a relative unit, when you choose to use them in media queries, the initial value will be 16px and not the 10px that you defined in your styles even though that was still inside the root element.

I hope that clears the confusion. 👌

Aqui outra dica pra você João:

A estrutura html o design também, algo que você pode fazer para melhorar a imagem que precisa mudar entre mobile e desktop é usar <picture> ao invés de <img> dentro de uma div. Por motivos de SEO e mecanismos de pesquisa tipo Google e bing, não é uma boa prática importar esta imagem do produto com CSS, pois isso dificultará a localização da imagem no google. Você pode gerenciar ambas as imagens dentro da tag <picture> e usar o código html para definir quando as imagens devem mudar configurando o dispositivo max-width dependendo do dispositivo (mobile / desktop) Aqui está um guia sobre como usar picture: https://www.w3schools.com/tags/tag_picture.asp