Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal.
Estou com o seguinte probleminha, queria ocultar a minha sidebar ,que está na tag "aside" , nas resoluções abaixo de 480px. Tentei utilizar o display none mas não houve sucesso.
Queria saber como posso tirar a hover dos elementos também nas resoluções abaixo de 480px.
Segue abaixo os códigos:
PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<div class="menucontent">
<nav class="menunav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Portifolio</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<!--Nav Menu -->
<div class="socialtop">
<a href="#"><img src="images/tumblr.gif" height="30" width="30" alt="Tumblr"></a>
<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Pint"></a>
<a href="#"><img src="images/facebook.gif" height="30" width="30" alt="Tumblr"></a>
<a href="#"><img src="images/twitter.gif" height="30" width="30" alt="Pint"></a>
</div>
<!--Redes sociais-->
</div>
<!--Menu-->
<div class="logo">
<img src="images/logodani.png" width="auto" height="auto">
</div>
<!--Logo-->
<div class="linha"></div>
<!--Linha de Seperação-->
</header>
<!--Header-->
<div id="content">
<div class="pcontent">
<article class="postp">
<div class="category">
<a href="#">Categoria do Post</a>
</div>
<!--Category-->
<div class="agrupapost">
<div class="ptitulo"><h1>Titulo do post</h1></div>
<!--Titulo do Post-->
<div class="infoautor">
Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
<hr />
</div>
<!--Info Autor-->
<div class="thumbpost">
<img src="images/FB_IMG_1422550451180.jpg" height="600" width="480" alt="">
</div>
<!--Thumb Post-->
<div class="pfooter">
<div class="pcomment"><a href="#"><span>12</span> Comentarios</a></div>
<!--Comentarios-->
<div class="leiamais"><a href="#">Continue Lendo ></a></div>
<!--Continue Lendo-->
<div class="psocial">
<a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
<a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
<a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
<a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
</div>
<!--Redes Sociais-->
</div>
<!--Footer Post-->
</div>
<!--Agrupa Post-->
</article>
<!--Article Post-->
<div class="paginacao">
<p>Pagina 1 de 100</p>
</div>
<!--Paginação-->
</div>
<!--Conteudo do Post-->
<anside id="sidebar">
</anside>
<!--Anside Sidebar-->
</div>
<!--Conteduo-->
<footer id="footer">
<p><small>© Copyright DanieleBe 2015. Todos os direitos reservados.</small></p>
</footer>
<!--Footer-->
</body>
</html>CSS
/-------GERAL-------/
*{margin: 0; padding: 0; list-style: none;text-decoration: none;}
img, picture, video, embed {max-width: 100%;}
body {background: #f5f0e7;font-family: Arial;}
/------HEADER------/
#header{width: 100%;}
.menucontent {z-index: 1;position: fixed;width:100%;top:0;background: black; height: 35px;} /Todo o menu e redes sociais/
.menunav {float: left;text-align: center;} /Tag Nav/
.menunav ul li{display: inline;}
.menunav ul li a {color: #fff;line-height: 35px;text-align: center;margin-right: 10px;}
.menunav li a:hover{background: #393939;color: #fff;border-bottom: solid 4px #FF8C00;border-radius: 2px;text-shadow:1px 0px 1px #fff;}
.socialtop {float: right;}
.socialtop img {filter: alpha(opacity:0.5); KHTMLOpacity: 0.5; MozOpacity: 0.5; -khtml-opacity:.50; -ms-filter:"alpha(opacity=50)"; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.socialtop img:hover {filter: alpha(opacity:1); KHTMLOpacity: 1; MozOpacity: 1; -khtml-opacity:.1; -ms-filter:"alpha(opacity=100)"; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;}
.logo{max-width: 500px;max-height: 150px;margin:auto;margin-top: 45px;}
.logo img {background-size: cover;}
.linha {display:block;
margin: 10px auto;
height:1px;max-width: 1180px;width: 100%;background-color:black;box-shadow: #000 0 1px 5px;-webkit-box-shadow: #000 0 1px 5px;-moz-box-shadow: #000 0 1px 5px;}/-----CONTEUDO DO SITE-----/
#content{max-width: 1180px;width: 100%;margin:auto;background: gray;}
/Post do Blog/
.pcontent{width: 69.49152542372881%; float: left;} /Conteudo do Post/
.postp {width: 100%;} /Post Resumidos - Article/
.category{position:relative;top: 15px;width: 20%;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}
.agrupapost{width: 100%; border: 1px solid #CFD1D9;margin-bottom: 1.250em;}
.ptitulo{margin-top: 1.563em;text-align: center;}
.infoautor{text-align: center;font-size: 0.750em;}
.infoautor hr{width: 80%;margin:auto;margin-top: 0.313em;}/500px% 5px/
.thumbpost{margin-top: 0.938em;text-align: center;}
.pfooter {width: 100%;display: inline-block;}
.pcomment {}
.leiamais {}
.psocial {}
.psocial a {vertical-align: middle;}
/Efeito transparencia Redes sociais/
.psocial img {filter: alpha(opacity:0.5); KHTMLOpacity: 0.5; MozOpacity: 0.5; -khtml-opacity:.50; -ms-filter:"alpha(opacity=50)"; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.psocial img:hover {filter: alpha(opacity:1); KHTMLOpacity: 1; MozOpacity: 1; -khtml-opacity:.1; -ms-filter:"alpha(opacity=100)"; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;}
.paginacao{font-style: italic;
font-size: 18px;
color: #888;
margin-left: 20px;
text-align: center;}/-----SIDEBAR-----/
#sidebar{margin-top: 30px;width: 28.8135593220339%;height: 500px;background: gray;float: right;}
/------FOOTER-----/
#footer{float: left;bottom:0;width:100%;height:100px;background: black;margin-top: 20px;}
#footer p{text-align: center;line-height: 100px; / Posiciona o texto no centro /}
#footer small{color:#fff;}
/-----MEDIAS QUERIES-----/
/*
1200px – Desktops, notebooks com monitores widescreen
***********************************************************/
@media screen and (max-width=1200px){
}
/*
960px – Tablets no formato paisagem e alguns monitores mais antigos
***********************************************************/
@media screen and (max-width=960px){
}
/*
768px – Tablets no formato retrato, como o iPad
***********************************************************/
@media screen and (max-width=768px){
}
/*
480px – Smartphones no formato paisagem com tela pequena
***********************************************************/
@media screen and (max-width=480px){
#sidebar {display: none;float: none;}
}
/*
320px – Smartphones no formato retrato com tela pequena
***********************************************************/
@media screen and (max-width=320px){
}
Desde já agradeço.
Em primeiro lugar, adicione a metatag viewport no cabeçalho (HEAD) de sua página:
<meta name="viewport" content="width=device-width,initial-scale=1">
Explicação completa a respeito: http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/
Depois, apenas corrija a sintaxe de suas media queries substituindo o "=" igual, por ":" dois pontos.
@media screen and (max-width: width desejado){
#footer {
display: none;
}
}Muito obrigado mesmo, nao tinha reparado que estava faltando a viewport .
Só mais uma duvida, sabe como posso tirar o efeito hover ?