1
Hello,
I’m building a responsive web page with a dropdown menu. In the desktop browser it works blza, but on mobile does not work, the page just decreases in size without doing the dropdown. I use @media, limiting the maximum width to 768px, according to the codes below:
html, body, header{
margin: auto;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.topo-logo{
width: 100%;
}
article, main footer, header, nav, section{display: block;}
#tudo{
width: 100%;
margin-left: 0;
}
body{
font-family: "Tahoma" , sans-serif;
font-size: 12px;
background: white;
margin: 0;
padding: 0;
width: 100%;
display: block;
margin: auto;
}
/*== Logomarca ==*/
.topo-logo{
margin-left: 0;
width: 100%;
}
/*== Menu ==*/
.caixa{
position: absolute;
width: 100%;
background-color: black;
height: 45px;
z-index:2 ;
width: 100%;
}
#bt_menu{
display: none;
}
label{
display: block ;
}
.container{
margin-top:0%;
padding: 0;
}
.menu {
margin-left: 30%;
background-color: black;
width: 100%;
border-right: 1px solid white;
}
/*Estilizando as listas */
.menu ul {
position: relative;
list-style: none;
transition: all .4s;
justify-content: center;
padding: 0;
margin-top: auto;
align-content: center;
z-index: 2;
}
.menu li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: flex;
border-right: 1px solid white;
}
.menu ul li {
float: left;
border-top-color: white;
}
.menu a {
padding: 15px;
display: block;
text-decoration: none;
text-align: justify-all;
background-color: black;
color: white;
}
.menu a:hover {
background-color: forestgreen;
color: white;
}
/*Criando o label */
label[for=”bt_menu”]{
padding: 20px;
background-color: black;
color: black;
font-family: sans-serif;
text-align: left;
font-size: 30px;
cursor: pointer;
height: 100px;
}
label[for=”bt_menu”]{
display: none;
background-color: white;
}
@media (max-width: 768px){
label[for=”bt_menu”] {
display: block;
height: 50px;
}
.caixa{
background-color: black;
width: 100%;
height: 35px;
padding: 0;
position: relative;
}
#fale_conosco{
width: 40%;
margin top: 0;
}
#formulario {
width: 100%;
padding: 10px;
border-radius: 10px;
}
#formulario form{
border: none;
}
#formulario input{
padding: 10px;
max-height: 40px;
}
#mensagem{
width: 100%;
}
#bt_menu:checked ~ .menu{
margin-left: 0;
}
label{
display:block;
margin-left: 3px;
width: 100%;
color: white;
height: 100%;
width: 30px;
font-size: 22px;
padding: 1px 0px 0px 4px;
border-right: 1px solid white;
}
.menu{
position: absolute;
width: 30%;
margin-left: -30%;
transition: all .4s;
flex-direction: column;
padding: 0px;
z-index: 2;
}
.menu ul li { /*lista*/
width: 100%;
padding: 0px;
z-index: 2;
}
}
#quem_somos{
font-size: 14;
text-align: center;
margin-top: 5%;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Quem Somos</title>
<meta name="description" content="Site do curso de desenvolvimento Web" />
<meta keywords="site, css, javascript, html"/> <!-- Palavras chave -->
<meta name="author" content="Higor Lemos"/> <!-- Autor do site -->
<link rel="stylesheet" href="css/estilo.css" /> <!-- liga o html ao css -->
</head>
<body>
<div id="tudo">
<!-- Área de Navegação -->
<nav class="topo-logo"> <a href="index.html">
<img src="img/logo.png"/ alt="Minha Marca">
</a>
</nav>
<div class="container">
<!-- Menu -->
<input type="checkbox" id="bt_menu" class="bt_menu"/>
<div class = "caixa"><label for="bt_menu">☰</label></div>
<nav class="menu">
<ul>
<li> <a href="index.html"> <b> INÍCIO </b> </a> </li>
<li> <a href="quem_somos.html"> <b> QUEM SOMOS </b> </a> </li>
<li> <a href="servicos.html"> <b> SERVIÇOS </b> </a> </li>
<li> <a href="contato.html"> <b> CONTATO </b> </a></li>
<li> <a href="fale_conosco.html"> <b> FALE CONOSCO </b> </a></li>
</ul>
</nav>
</div>
<section id="quem_somos">
<h1> Quem Somos </h1>
<div>
<p> A Cactus é uma empresa criada em fevereiro de 2018, em Vitória da Conquista-BA. Atua no ramo de serviços gráficos e venda de produtos. </p>
</div>
<div>
<h3>Missão</h3>
<p>Tem como missão "Imprimir sonhos".</p>
</div>
<div>
<h3>Visão</h3>
<p>Nossa visão é nos tornarmos uma empresa destaque baiano no segmento em que atuamos.</p>
</div>
</section>
<footer> Desenvolvido por Higor Lemos. </footer>
</div>
</body>
</html>How can I solve this problem?
Other related https://answall.com/questions/309370/como-declarar-e-usar-a-regra-viewport
– hugocsl