Solucionado
Ola boa noite, dia, tarde, A minha pagina de produtos nao esta ficando responsiva, ja coloquei
meta name="viewport" content="width=device-width"> na pagina HTML (do produtos) dela e mesmo assim não esta ficando responsiva
estou errando em algo? Poderiam me ajudar?
HTML da pagina produtos
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Produtos - Barbearia Alura</title>
<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 >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
</footer>
</body>
Oi Lucas, tudo bem?
Poderia mandar também o seu código CSS? Assim fica melhor pra te ajudar :D
Obrigada desde já.
Bons estudos!
Oi Lucas, tudo bem? Eu estava colocando apenas a classe produtos e a pagina estava igual a sua. Quando inclui .produtos li (que a lista de itens) deu certo. Fiz assim no css:
.produtos, .produtos li { display: block; width: 95%; padding: 5px 5px; margin: 10px 10px; }
O display eu coloquei block, inline, inline-block e não vi diferença. Então deixei block mesmo rs.
Este e meu CSS
body { font-family: 'Montserrat', sans-serif; }
header { background:#BBBBBB; padding: 20px 0; }
.caixa { position: relative; width: 940px; margin: 0 auto; }
nav { position: absolute; top: 110px; right: 0; }
nav li { display: inline; margin: 0 0 0 15px; }
nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }
nav a:hover { color: #C78C19; text-decoration: underline; }
.produtos { width: 940px; margin: 0 auto; padding: 50px 0; } .produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }
.produtos li:hover { border-color: #C78C19; font-size: 40px; }
.produtos li:active { border-color: #088C19; }
.produtos li:hover h2 { font-size: 34px; }
.produtos h2 { font-size: 30px; font-weight: bold; }
.produto-descricao { font-size: 18px; font-weight: bold; }
.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }
footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }
.Copyright { color: #FFFFFF; font-size: 13px; margin: 20px; }
main { background: #FEFEFE; }
form { margin: 40px 0; }
form label, form legend { display: block; font-size: 20px; margin: 0 0 10px; }
.input-padrao { display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }
.checkbox { margin: 20px 0; }
.enviar { width: 40%; padding: 15px 0; background: orange; color: white; font-weight: bold; font-size: 18px; border: none; border-radius: 5px; transition: 2s all; cursor: pointer; }
.enviar:hover { background: darkorange; transform: scale(1.2); }
table { margin: 20px 0 40px; }
thead { background: #555555; color: white; font-weight: bold; }
td, th { border: 1px solid #000000; padding: 8px 15px; }
/* css da pagina inicial */ .banner { width: 100%;
}
.titulo-principal { text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }
.principal { padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto; }
.principal p { margin: 0 0 1em;
}
.principal strong { font-weight: bold; }
.principal em { font-style: italic; }
.utensilios { width: 120px; float: left; margin: 0 20px 20px 0; }
.mapa { padding: 3em 0; background: linear-gradient(#FEFEFE,#888888); }
.mapa-conteudo { width: 940px; margin: 0 auto; }
.mapa p { margin: 0 0 02em; text-align: center; }
.beneficios { padding: 3em 0; background: #888888; }
.conteudo-beneficios { width: 640px; margin: 0 auto; }
.lista-beneficios { width: 40%; display: inline-block; vertical-align: top; }
.itens { line-height: 1.5; }
.itens:first-child { font-weight: bold; }
.itens:before { content: "★"; }
.imagem-beneficios { width: 60%; opacity: 1; transition: 400ms; box-shadow: 10px 10px 30px 20px #000000; }
.imagem-beneficios:hover { opacity: 0.3; }
.video { width: 560px; margin: 2em auto; }
@media screen and (max-width: 480px) { .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video { width: auto; }
h1 {
text-align: center;
}
nav {
position: static;
}
.lista-beneficios, .imagembeneficios {
width: 100%;
}Thaise, pode me mostrar como esta seu css?