Bom noite, tudo bem?
Estou realizando as atividades juno com a professora e um das partes é do projeto jornada viagens colocar as colunas em linha com o comando flex-direction em linha. Quando coloco o comando ele continua em coluna e não segue para linha. Alguem sabe o que pode ser, para vizualizar o programa irei deixar o link do git.
https://github.com/Vinicius-Celeghini/jornada-viagens
Imagem do que está ocorrendo.
Olá, Vinicius. Como vai?
Analisando a imagem do seu DevTools e o código que você compartilhou, consegui identificar exatamente o que está acontecendo. Esse é um comportamento muito comum quando estamos aprendendo sobre especificidade e cascata no CSS.
O problema central é que o seu comando flex-direction: row está sendo "vencido" por outra regra. Se você observar atentamente a aba de estilos na imagem, verá que a propriedade dentro da sua @media está com uma linha atravessada (riscada).
Aqui estão os principais motivos e como resolver:
1. Erro de Sintaxe na Classe
Na imagem, notei que a classe dentro da Media Query está escrita como .offers-cards (com hífen), mas a regra que está aplicando o column logo abaixo parece estar usando um nome ou seletor que o navegador está considerando mais importante. Verifique no seu arquivo HTML se o nome da classe está exatamente igual ao do CSS.
2. A Ordem da Cascata
O CSS lê as instruções de cima para baixo. Se você definiu o .offers-cards { flex-direction: column; } depois da sua Media Query no arquivo CSS, o navegador vai aplicar a última instrução que ele leu.
Como corrigir: Certifique-se de que a sua @media screen and (min-width: 768px) esteja posicionada no final do seu arquivo offers.css. Assim, ela terá a "última palavra" quando a tela for maior que 768px.
3. Falta do Display Flex na Media Query
Embora o display: flex já esteja definido globalmente, às vezes, ao reescrever a classe dentro da Media Query, é bom garantir que o navegador entenda que aquele bloco ainda é um flexbox. Tente estruturar assim no seu código:
@media screen and (min-width: 768px) {
.offers-cards {
display: flex; /* Garante que o contexto flex continue ativo */
flex-direction: row; /* Muda de coluna para linha */
justify-content: center; /* Opcional: centraliza os cards na horizontal */
}
}
Dica extra: Na sua imagem, o seletor .offers-cards fora da media query está forçando um align-items: center. Quando você mudar para row, os cards ficarão um ao lado do outro, mas alinhados ao centro verticalmente. Se eles ficarem "grudados" no topo ou parecerem desalinhados, lembre-se de ajustar o justify-content também.
Faça essa mudança de posição da Media Query para o final do arquivo e verifique se o nome da classe no HTML não tem nenhum erro de digitação. Isso deve resolver o problema!
Espero que possa ter lhe ajudado!
Evandro boa noite, tudo bem?
Estou fazendo o projeto com a metodologia "mobile frist" pode parecer um pouco confuso. Observei os posicionamento que você encaminhou e todas estão certas. Vou dar uma olhada a mais e qualquer coisa refazer o codigo, parece ser algum comando que está impedindo o posionamento em row
O comando Gap no meu codigo tambem não funciona, sabe me informar o que pode ser?
Já localizei o problema. Coloquei a classe errada no html e com isso não aplicava corretamete o comando display: flex