Olá!
Fazendo as aulas de redimensionar os códigos para adaptar a dispositivos móveis, começou a ocorrer um erro quanto ao rodapé de uma de minhas páginas....
Considerando que utilizei a mesma classe "rodape" e a mesma pasta "style", porque o rodapé desta página não está se comportando da mesma maneira que o da página anterior?
Este seria o código CSS:
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Condensed:wght@300;400&display=swap');
*{
margin:0;
padding:0;
}
body{
box-sizing: border-box;
background-color: #000000;
color:white;
}
.cabecalho{
background-color: #000000;
padding:1% 2%;
}
.cabecalho__menu{
display:flex;
justify-content: center;
gap:7.5rem;
}
.cabecalho__menu__link{
color:#DAA520;
font-size: 1.5rem;
font-family: "Abel", sans-serif;
text-decoration: none;
gap: 1.25rem;
}
.cabecalho__menu__link:hover{
color:white;
}
.apresentacao{
padding: 3% 10%;
display:flex;
align-items: flex-start;
gap:2.5rem;
}
.apresentacao__about{
padding: 3% 10%;
display:flex;
align-items: flex-end;
}
.apresentacao__conteudo{
width: 500px;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.apresentacao__conteudo__titulo{
font-size: 2.18rem;
font-family:"Roboto Condensed", sans-serif;
}
.apresentacao__conteudo__texto{
font-size: 1.25rem;
font-family:"Roboto Condensed", sans-serif;
font-weight: 300;
}
.apresentacao__contato__comeco{
padding: 10% 5% 5% 10%;
display: flex;
align-items: flex-start;
gap: 2.5rem;
}
.icones{
padding: 3% 10%;
display: flex;
justify-content: space-around;
}
.rodape{
color:#000000;
padding:0.5rem;
background-color: #DAA520;
font-family:"Abel", sans-serif;
font-size: 0.93rem;
text-align: center;
}
@media(max-width: 750px){
.cabecalho{
background-color: #DAA520;
}
.cabecalho__menu__link{
color:#000000;
}
.apresentacao{
flex-direction: column-reverse;
align-items:center ;
}
}