Caelum WD-43, Desenvolvimento Web - Testando adaptação mobile

Front-end
#1

Olá a todos, tudo certo?

Essa é minha primeira postagem aqui, espero que não esteja perguntando algo muito besta, sou bem novo nesse mundo developer rsrs.

Estou seguindo a apostila do curso WD-43, Desenvolvimento Web com HTML, CSS e Javascript, trabalhando agora no capitulo 6, Web para dispositivos móveis (link da apostila abaixo).

Estou agora fazendo a primeira sessão de exercícios (item 6.5). Teoricamente ao final do exercício 2 já deveria ter alterado a visualização do site ao redimensionar o navegador para 320px, porém nada acontece.
Já digitei o código até o exercício 3 e nada.

Código do mobile.css até agora:

.container {
width: 96%;
}

header h1 {
text-align: center;
}

header h1 img {
max-width: 50%;
}

.sacola {
display: none;
}

.menu-opcoes {
position: static;
text-align: center;
}

.menu-opcoes ul li {
display: inline-block;
margin: 5px;
}

.busca,
.menu-departamentos,
.destaque img {
margin-right: 0;
width: 100%;
}

Código da importação no index.html:

<head>
	<title>Mirror Fashion</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="css/estilos.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/mobile.css" media="(max-width: 320px)">
</head>

Tentei alterar até a resolução da minha tela mas o mínimo que o W10 no meu laptop permite é 800 x 600.

Qualquer ajuda será bem vinda, estou preso nisso a bem 1 hora já :sweat_smile::sweat_smile::sweat_smile:

Valeu!

#2

Esse Css está dentro do arquivo mobile.css ? tenta isso aqui em baixo

.painel { width: auto; }

.painel li {
width: 30%;
}
.painel img {
width: 100%;
}

tenta mudar a declaração de <link rel=“stylesheet” href=“css/mobile.css” media="(max-width: 320px)"
para

<link rel="stylesheet" href="css/mobile.css" media="(max-width: 939px)"
#4

Olá, também estava com esse problema “resolvi” digitando body antes de cada seletor. Eu sei que isso aumenta a especificidade do seletor, mas alguém pode me responder porquê o site mostrado no curso não necessita dessa especificidade para funcionar corretamente?