Ocutar elemente na mediaqueries

emilyoly · Maio 20, 2015

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 &gt</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.

rikaschmitt · Maio 20, 2015

Você precisa declarar a meta viewport no <head> para funcionar as media queries.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Emet · Maio 20, 2015

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;
  }
      
}

emilyoly · Maio 20, 2015

Muito obrigado mesmo, nao tinha reparado que estava faltando a viewport .

Só mais uma duvida, sabe como posso tirar o efeito hover ?

Entrar

Arquivado

Ocutar elemente na mediaqueries

Recommended Posts

emilyoly 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Emet 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

emilyoly 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pergunta: Try your luck today.

Pegar o nome do input text do formulário submetido

Codeigniter - Como enviar múltiplos e-mails com PHPmailer

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante