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

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á

Valeu!

2 Respostas

maycon1 3 de nov. de 2016

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

Lourival_Miguel 5 de fev. de 2017

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?

2 Respostas

Topicos relacionados