[Dúvida] Dúvida com projeto AluraBooks - Formação Front-End

Oii, Willian.

Estou aqui para ajudar, mas preciso de mais informações para entender sua dúvida.Siga as orientações do guia de como fazer uma boa pergunta no fórum e me retorne com mais informações do problema pois precisamos do código completo.

Aguardo seu retorno! Abraço.

Bom, seguindo parte do link que vc me passou eu estou usando Win 11 e VSCode.

Segue link do código completo como solicitou: https://github.com/willianslc/projeto-alura-books.git

Na aula da instrutora Mônica o resultado é esse:

E no meu código fica apenas assim:

Esse problema esta na parte de aplicar a Media Query no Desktop 1728px.

Os arquivos que vc vai precisar verificar em teoria é o index.html e o header.css.

No caso esse texto abaixo dos ícones é uma tag P dentro da Tag A, eu preciso coloca-los um do lado do outro como mostra o print com resultado do código da instrutora.

Já fiz várias testes e alterações no código mas não consegui resolver, pedi auxilio ao ChatGPT e não consegui resolver com ele pois o que ele me passou também não deu certo. Enfim estou travado nessa parte rsrsrs.

Oii!

Obrigada por compartilhar o código completo.

O problema no seu layout está no seguinte trecho de CSS:

@media screen and (min-width: 1728px) {
    .container-link {
        display: flex;
        align-items: center;
        flex-direction: column;
    } 
}

Essa regra faz com que, em telas com largura mínima de 1728px, o texto fique abaixo do ícone (flex-direction: column). Isso é exatamente o que está causando o a diferença pra aula.

Se você quer que o ícone e o texto fiquem lado a lado, remova ou comente essa regra de flex-direction: column. Assim:

@media screen and (min-width: 1728px) {
    .container-link {
        display: flex;
        align-items: center;
        /* flex-direction: column; */
        text-decoration: none;
        color: var(--preto);
    } 

    .cabecalho {
        padding: 0 2em;
    }

    .opcoes {
        margin-right: auto;
    }

    .container-texto {
        display: block;
    }
}

Resultado:

Outra coisa que notei, está faltando chamar a class container-texto na parte do mobile para que o texto suma quando a tela ficar menor. Então coloque o código antes de começar essa parte @media screen and (min-width: 1024px):

.container-texto {
    display: none;
}

Ficará certinho:

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Boa tarde, fazendo da forma que vc me passou não deu certo...

Veja como ficou atualmente o resultado

Não é para ficar desta forma no media query de desktop 1728px, percebi que nada mais funciona nesse header, coloquei a margem auto para os menus ficarem a esquerda como pede o projeto no Figma mas nada acontece, segue como deve ser o layout para desktop no Figma, ícone e texto lado a lado e os menus a esuqerda

Quanto a parte da classe "container-texto" eu consegui ajustar ela para que a mesma não apareca na query de mobile e nem na de tablet acrescentando ela como display none em ambas as medias, isso eu consegui corrigir, mas os links ali não funciona de forma alguma, to desde sexta tentando fazer funcionar kkkkk...

OBS: Já atualizei o código no github veja como ficou o código após sua orientação: https://github.com/willianslc/projeto-alura-books.git

Boa noite, vim só para informar que resolvi o problema kkkkkkkkkkk... Parece piada mas era nada mais nada menos que o meu navegador que estava com zoom em 125% kkkkkkkkkkkkk... É o que dá compartilhar a máquina com outra pessoa, muito obrigado pela sua ajuda e paciência rsrsrs