Tenho uma dúvida e acho que outras pessoas também podem ter essa mesma dúvida...
Vamos a situação: Tenho um site, com header editado para aparecer em telas de computador (resoluções maiores que de tablets) porém gostaria que ao acessar o site por um celular ou tablet o header mudasse.
Exemplo: Tenho um LOGO1280x720.PNG e gostaria que o Logo320X70.PNG aparece quando acessado pela versão mobile.
Sei como fazer para esconder uma div em resolução menor, mas e para exibir uma div em versão mobile como faz?
obs: O site em si, já é responsivo
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
Resumindo: PRECISO QUE UMA DIV SUMA E OUTRA APARECE EM MOBILE E UMA DIV SUMA E OUTRA APARECE EM VERSÃO DESKTOP
Edit@2: Coloquei assim no HTML:
<div class="logopngdesktop"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>
<div class="logopngmobile"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>
E assim no CSS:
@media only screen and (max-width: 400px) { .logopngdesktop{ display: none !important; } } @media only screen and (min-width: 601px) { .logopngmobile { display: none !important; } }
Ela some na versão Mobile porém a parte em que era pra aparecer na versão mobile não funciona. O que posso estar errando?
SOLUÇÃO:
Problema resolvido, quero deixar aqui a resolução para todos que tenham o mesmo problema:
Html:
<!-- aparecer no desktop -->
<div class="mobile-hide"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>
<!-- aparecer no mobile -->
<div class="mobile"><div class="desktop-hide"><h1 class="logomobile"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div></div>
Css:
@media only screen and (max-width: 400px) {
.mobile-hide{ display: none !important; }
}
@media only screen and (max-width: 400px) {
.mobile{ display: inline !important; }
}
@media only screen and (min-width: 500px) {
.desktop-hide{ display: none !important; }
}
Agradeço a todos que tentaram ajudar!