Boa tarde Pessoal!
Estou estudando com a apostila da Caleum e montando o site Mirror Fashion, estava tudo bem até o momento de transformar o site em Mobile, segui todas as orientações e mesmo assim não deu certo, revisei tudo e consegui identificar onde estou errando.
Alguem pode me dar uma mão?
Opa, seja mais específico pra gente tentar ajudar. Que tipo de erro acontece? E conseguiu isolar em qual momento aconteceu? Foi quando colocou as media queries? Depois?
Se tiver o código online em algum canto, ajuda tbm pra gente visualizar
Opa Sergio!
Seguindo o exercício da apostila, criei um arquivo mobile.css, este é para redimensionar o site quando o mesmo for acessado por dispositivo movel, ou se eu redimencionar o browser.
E nada esta acontecendo.
os header e footer não estão corretos e com os paineis nada acontece.
Posta o código pra gente ver. Use o ``` aqui no fórum
Bom dia!
O código do CSS é este:
@media (min-width: 480px){
.container{
width :96%;
}
header h1{
text-align : center;
}
header h1 img{
max-width :50%;
}
.sacola{
display : nome;
}
.Menu-Opcoes{
position : static;
text-align : center;
}
.Menu-Opcoes ul li{
display : inline-block;
margin : 5px;
}
.menu-departamentos{
padding-bottom: 10px;
margin-bottom : 10px;
}
.menu-departamentos nav > ul{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.busca,
.menu-departamentos,
.destaque img{
width :100%;
margin-right : 0;
}
.painel{
width :auto;
}
.painel li{
width : 30%;
}
.painel img{
width :100%;
}
}
@media(min-width: 720px){
header h1{
text-align: left;
}
.Menu-Opcoes{
position : absolute;
}
.sacola{
display : block;
}
.painel li{
width : 15%;
}
.busca, .menu-departamentos{
margin-right : 1%;
width : 30%;
}
.menu-departamentos nav > ul{
-webkit-column-count : 1;
-moz-column-count : 1;
column-count : 1;
}
.destaque img{
width :69%;
}
}
A página principal o código é este:
<!DOCTYPE html>
<html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset = "utf-8">
<meta name = "viewport" content ="width=device-width">
<link rel = "stylesheet" href = "..\mirrorFashion\css\reset.css">
<link rel = "stylesheet" href = "..\mirrorFashion\css\estilos.css" type= "text/css" media = "screen">
<link rel = "stylesheet" href = "..\mirrorFashion\css\mobile.css" media = "(max-width: 320px)">
</head>
<body>
<header class = "container">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<h1><img src = "..\mirrorFashion\images\logo.png" alt = "Mirror Fashion"></h1>
<p class = "sacola">
Nenhum ítem na sacola de compras
</p>
<nav class = "Menu-Opcoes">
<ul>
<li><a href = "#">Sua Conta</a></li>
<li><a href = "#">Lista de Desejos</a></li>
<li><a href = "#">Cartão Fidelidade</a></li>
<li><a href = "sobre.php">Sobre</a></li>
<li><a href = "#">Ajuda</a></li>
</ul>
</nav>
</header>
<!--LISTA DE PRODUTO E FOTO DO MAIN.-->
<div class = "container destaque">
<section class = "Busca">
<p>Busca</p>
<form>
<input type = "search">
<input type = "image" src = "..\mirrorFashion\images\busca.png">
</form>
</section>
<section class = "menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li><a href = "#">Blusas e Camisas</a>
<ul>
<li><a href = "#">Manga Curta</a></li>
<li><a href = "#">Manga Comprida</a></li>
<li><a href = "#">Camisa Social</a></li>
<li><a href = "#">Camisa Social</a></li>
</ul>
</li>
<li><a href = "#">Calças</a>
<ul>
<li><a href = "#">Calça Jeans</a></li>
<li><a href = "#">Calça Social</a></li>
<li><a href = "#">Calça Cano Longo</a></li>
<li><a href = "#">Bermudas</a></li>
</ul>
</li>
<li><a href = "#">Saias</a>
<ul>
<li><a href = "#">Mini Saias</a></li>
<li><a href = "#">Saia Longa</a></li>
<li><a href = "#">Saiote</a></li>
</ul>
</li>
<li><a href = "#">Vestidos</a>
<ul>
<li><a href = "#">Vestido Social</a></li>
<li><a href = "#">Vestido de Festa</a></li>
</ul>
</li>
<li><a href = "#">Sapatos</a>
<ul>
<li><a href = "#">Sapatenis</a></li>
<li><a href = "#">Social Social</a></li>
<li><a href = "#">Sapatilhas</a></li>
<li><a href = "#">Botas</a></li>
</ul>
</li>
<li><a href = "#">Bolsas e Carteiras</a>
<ul>
<li><a href = "#">Bolsas</a></li>
<li><a href = "#">Carteiras</a></li>
<li><a href = "#">Mochilas</a></li>
<li><a href = "#">Malas</a></li>
</ul>
</li>
<li><a href = "#">Acessórios</a>
<ul>
<li><a href = "#">Brincos</a></li>
<li><a href = "#">Makeup</a></li>
<li><a href = "#">Pulseiras</a></li>
<li><a href = "#">Colares</a></li>
</ul>
</li>
</ul>
</nav>
</section>
<img src = "..\mirrorFashion\images\destaque-home.png" alt = "Promoção: Big City Night">
</div>
<!--CONTEINERS e PAINEIS DOS PRODUTOS EM DESTAQUE E OS MAIS VENDIDOS.-->
<div class = "container paineis">
<section class = "painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura1.png" alt = "miniatura1">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura2.png" alt = "miniatura2">
<figcaption>Conjunto Bad To the Bone R$ 78,95</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura3.png" alt = "miniatura3">
<figcaption>Colt Nail Cotton R$ 221,99</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura4.png" alt = "miniatura4">
<figcaption>Jaqueta almofadada R$ 450,25</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura5.png" alt = "miniatura5">
<figcaption>Conjunto Gin R$ 133,20</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura6.png" alt = "miniatura6">
<figcaption>T-Shirt R$ 51,90</figcaption>
</figure></a>
</li>
</ol>
</section>
<section class = "painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura7.png" alt = "miniatura7">
<figcaption>Camisseta Linho Tess por R$ 59,90</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura8.png" alt = "miniatura8">
<figcaption>Conjunto Fashion por R$ 47,25</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura9.png" alt = "miniatura9">
<figcaption>Mini kit por R$ 46,50</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura10.png" alt = "miniatura10">
<figcaption>Outro conjunto por R$ 181,00</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura11.png" alt = "miniatura11">
<figcaption>Tenis por R$208,99</figcaption>
</figure></a>
</li>
<li>
<a href = "#">
<figure>
<img src = "..\mirrorFashion\images\produtos\miniatura12.png" alt = "miniatura12">
<figcaption>Camisão por 34,70</figcaption>
</figure></a>
</li>
</ol>
</section>
</div>
<!--footer>
<div class = "container">
<img src = "..\mirrorFashion\images\logo-rodape.png" alt = "Logo Mirror Fashion"></img>
<ul class = "social">
<li><a href = "http://facebook.com/mirrorfashion">Facebook</li>
<li><a href = "http://twitter.com/mirrorfashion">Twitter</li>
<li><a href = "http://plus.google.com/mirrorfashion">Google+</li>
</ul>
</div>
</footer-->
<!--PARTE DO RODAPE QUE ESTA FUNCIONANDO-->
<footer>
<div class = "container">
<img src = "..\mirrorFashion\images\logo-rodape.png" alt = "Logo Mirror Fashion"></img>
<ul class = "social">
<li>
<a href = "http://facebook.com/mirrorfashion">
<img src = "..\mirrorFashion\images\facebook.png" alt = "Facebook" title = "Facebook" target = "Facebook">
</a>
</li>
<li>
<a href = "http://twiter.com/mirrorfashion">
<img src = "..\mirrorFashion\images\twitter.png" alt = "Twitter" title = "Twitter" target = "Twitter">
</a>
</li>
<li>
<a href = "http://plus.google.com/mirrorfashion">
<img src = "..\mirrorFashion\images\googleplus.png" alt = "Google+" title = "Google+" target = "Google+">
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
</html>
Repara no seu HTML que esse CSS só está sendo aplicado em media="(max-width: 320px)". Isso quer dizer que você precisa redimensionar o browser exatamente nessa resolucao ou menores. E no celular, mesma coisa, precisa ser menor que 320 (hj a maioria dos Androids é 360 por exemplo)
Sim, eu fiz isso
não deu certo, a unica coisa que acontece é a foto destaque mudar de lugar com o menu, mais com os paineis por exemplo não acontece nada.