Não estou conseguindo adicionar o Css nas paginas do produto e contato para finalizar com @media screen, não sei no que estou errando!

Olá Antônia, tudo bem? =)

Durante as aulas o professor Pedro utiliza o CSS "style.css" para criar a "@media screen...".

Eu percebi que meu CSS style.css não estava sendo aplicado na página de produtos também.

Para resolver alterei o media querie que estava assim:

@media screen and (max-width: 480px) {
    /* tags */
}

E deixei desta maneira:

@media screen and (max-device-width: 480px) {
    /* tags */
}

A diferença é que inseri o "device" no parenteses da media querie, de repente vale o teste ;)

Deu certo, obrigada!

A minha dúvida é, usamos a mesma página de css para a página principal e a página de produtos. Na página de produtos usamos o mesmo h1 para a logo da barbearia que fica la em cima, e no media screen só está sendo rutilizada na página principal, porque que a logo na página de produtos não sofreu alteração ?

Olá Luis, tudo bem? =)

Pelo que verifiquei, na verdade, ali no media querie:

@media screen and (max-width: 480px){
    /* tags aqui  */
}

Não é utilizado o "max-device-width" pois no HTML da página inicial há esta tag meta:

<meta name="viewport" content="width=device-width">

Então, ao utilizar max-width no media querie, já está definido width como sendo a device-width.

Na nossa página de produtos, não havíamos colocado esta tag meta, que define a width como acima, por este motivo não funciona.