Utilizei a media query para colocar a section no tamanho disponível na página em telas menores, mas ela não funcionou. todas as outras funcionaram. menos "width:auto;" que não está sobrescrevendo o "width: 50%;
@media (max-width: 1200px){
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
};
.apresentacao__conteudo{
width: auto;
}
}
Oi Jonatan, tudo bem contigo? Espero que sim!
Parece que a regra width: auto; não está sobrescrevendo o width: 50%; que você definiu anteriormente.
Uma possibilidade é que a regra width: 50%; esteja sendo definida depois da media query no seu CSS, o que faria com que ela sobrescrevesse a regra width: auto; da media query. No CSS, se duas regras têm a mesma especificidade, a que vem depois sobrescreve a que vem antes.
Por exemplo, se o seu CSS estiver assim:
.apresentacao__conteudo{
width: 50%;
}
@media (max-width: 1200px){
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
};
.apresentacao__conteudo{
width: auto;
}
}
A regra width: 50%; vai sobrescrever a regra width: auto; da media query, porque ela vem depois no código.
Para resolver isso, você pode tentar colocar a regra width: 50%; antes da media query, assim:
.apresentacao__conteudo{
width: 50%;
}
@media (max-width: 1200px){
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
};
.apresentacao__conteudo{
width: auto;
}
}
Dessa forma, a regra width: auto; da media query vai sobrescrever a regra width: 50%; quando a tela for menor que 1200px.
Espero ter ajudado!
Caso tenha dúvidas, fico à disposição.
Abraços e bons estudos!
o meu bloco de media query é a última coisa da folha de estilo. então não é esse o caso :/