Não consegui deixar a página responsiva
Não consegui deixar a página responsiva
<!DOCTYPE html>
<html>
<html lang = "pt-BR">
<head> <!--margin -> espaçamento fora do conteúdo-->
<meta charset = "UTF - 8">
<meta name="viewport" content="width=device-width"> <!--padding -> espaçamento dentro do conteúdo-->
<title>Santos FC</title>
<link rel="shortcut icon" href="santos.png"> <!--adiciona imagem à aba-->
<link rel = "stylesheet" href = "style.css">
<link rel = "stylesheet" href = "reset.css">
<!--id -> para um tema específico-->
</head>
<body> <!--width -> sempre em porcentagem-->
<header>
<div class="caixa">
<h1>
<img id = "logo" src = "santos.png" alt = "Logo do Santos Futebol Clube"></h1> <!--imagem do menu-->
<nav> <!--Seção que aponta para outras páginas-->
<ul>
<li><a href = "index.html">Home</a></li> <!-- <a> indica um link-->
<li><a href = "produtos.html">Store</a></li>
<li><a href = "contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="principal">
<h2 id="titulo-principal"> Santos Futebol Clube</h2>
<p id = "corpo">O Santos Futebol Clube (popularmente conhecido como <strong>Santos</strong>) é um clube poliesportivo brasileiro da cidade de Santos - São Paulo.</p>
<p id = "corpo">Foi fundado em 14 de abril de 1912. Suas cores iniciais seriam o branco, azul e dourado, mas um ano após a sua fundação, ficou decidido que as cores do clube passariam a ser branco e preto.</p>
<p id = "corpo"><em>Santos Futebol Clube: <strong id="sublinhado2"> "É um orgulho que nem todos podem ter!"</strong></em></p>
<p id = "corpo">O único time a parar uma guerra civil, na Nigéria - África. Time com mais de 12 mil gols! Atualmente, único time a conquistar tal feito. </p>
</section>
<h3 id="sub2"> Títulos </h3>
<section class="titulos">
<ul> <!--usar o marcador (ul) no CSS, para colocar imagem ao lado do texto-->
<li class="itens"> Tricampeão da Taça Libertadores 62 - 63 - 11</li>
<li class="itens"> Bicampeão Mundial Interclubes 62 - 63</li>
<li class="itens"> Supercopa Sul-Americana 1968</li>
<li class="itens"> Recopa Intercontinental 1968</li>
<li class="itens"> 8x Campeão Brasileiro</li>
<li class="itens"> 22x Campeão Paulista</li>
<li class="itens"> Taça Conmebol 1998</li>
<li class="itens"> Copa do Brasil 2010</li>
<li class="itens"> Recopa Sul-Americana 2012</li>
</ul>
<img src = "trofeus.jpg" class = "memorial" alt = "Troféus do Memorial das Conquistas">
</section>
<h4 id = "vila">Estádio Urbano Caldeira - Vila Belmiro</h4>
<img class = "estadio" id="vila1" src="frentevila.jpg" alt="Frente da Vila Belmiro">
<img class = "estadio" id = "vila2" src = "vila.jpg" alt = "Estádio da Vila Belmiro">
</main>
<footer>
<p class = "rodape">Santos Futebol Clube | Todos os direitos reservados © Copyright 2020 | Termos de Uso</p>
</footer>
</body>
</html>
@media screen and (max-width: 480px){
{
width: auto;
}
}
Oi, Henrique, tudo bem?
Nessa aula aqui o instrutor ensina como deixar a página home responsiva: https://cursos.alura.com.br/course/html5-css3-avancando-css/task/63331 e você pode adaptar para sua página home e as demais. Mas é necessário declarar as classes, id, tags que você quer que se torne responsiva:
@media screen and (max-width: 480px){
.principal{
width: auto;
}
}
Esse curso vai tratar mais sobre responsividade na versão mobile:https://www.alura.com.br/curso-online-mobile-first-layouts-responsivos
Qualquer dúvida é só falar!