Solucionado
Olá pessoal
Espero que alguém possa me dar uma luz, estou tentando resolver o problema de responsividade, porém não importa o código que escrevo, cheguei até a copiar o código de outras pessoas, meu navegador não repsonder (Chorme), sempre após alterar o código eu salvo normalmente, mas nada funciona.
No modo desenvolvedor nenhuma alteração aparece.
Alguém saberia me dizer o que pode ser?
Parece que somente a pagina principal que sofre alteração.
Olá, Matheus.
Tudo bem?
Poderia por gentileza compartilhar os seus códigos HTML e CSS aqui com a gente, referente a página que não está funcionando?
Se puder mandar um print do navegador seria legal também, fica melhor para ajudar visualizando.
Estou aguardando.
Ah sim, desculpe.
HTML:
<link rel ="stylesheet" href ="reset.css">
<link rel="stylesheet" href ="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src= "logo.png"> </h1>
<nav>
<ul>
<li> <a href = "index.html">Home</a></li>
<li> <a href = "produtos.html" >Produtos</a></li>
<li> <a href = "contato.html">Contato </a> </li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou maquina como o cliente preferir</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo e barba </p>
<p class="produto-preco">R$35,00</p>
</li>
</ul>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2022</p>
</footer>
</body>@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video{
width: auto;
}
h1{
text-align: center;
}
nav {
position: static;
}
.lista-beneficos, .imagembeneficios{
width: 100%;
}
.produtos{
width: 100%;
}
.produtos li{
display: block;
width: 80%;
margin: 20px auto;
}
}
Opa, Matheus.
Ah ta, entendi! É na parte responsiva né, para dispositivos mobile.
Você só precisa adicionar essa linha de código dentro do seu <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Vai ficar assim:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produtos - Barbearia Alura</title>
<link rel ="stylesheet" href ="reset.css">
<link rel="stylesheet" href ="style.css">
</head>A viewport meta tag permite controlar a largura e a escala da janela de visualização para que ela seja dimensionada corretamente em todos os dispositivos.
Qualquer dúvida manda aqui.
nossa nao tinha reparado nisso, tava batendo cabeça haha muito obrigado Renan :)
Por nada! :)
Vou marcar como solucionada e fechar o tópico, Valeu!