Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

[Dúvida] Meu texto não se alinha como o do projeto!

Olá, além da minha imagem ficar maior que a do projeto da instrutora, o meu texto está abaixo da imagem e mesmo estilizando não consigo coloca-lo como o do prejeto original, outra dúvida, não entendi a class, (.secundário), que a instrutora usa para estilizar o alinhamento do texto com a imagem, sendo que no HTML mostrado na aula não existe essa class! alguém pode me ajudar ? Agradeço

11 respostas
solução!

Oi Paloma, tudo bem contigo?

Bom vamos com calma! Uma coisa por vez.

Primeiro sobre o texto estar abaixo da imagem. No caso da instrutora está usando o Grid para colocar uma organização nos itens, para poder resolver isso verifique se as colunas do contêiner estão configuradas certo, pois deveria haver 2 colunas no contêiner graças a esse código aqui que está nos estilos da classe .container:

grid-template-columns: 50% 50%;

Outro detalhe os textos precisam estar dentro de uma div que dividirá espaço com a imagem, ou seja, no Grid nesse projeto a imagem ocupa um espaço de uma coluna e a div que tem dentro dela um título e um parágrafo irão ocupar a outra coluna.

Então se algo disso não estiver como deveria todo o estilo quebra.


Agora sobre a classe .secundario usada pela instrutora, ela realmente existe, o que acontece é o seguinte:

  • Na primeira seção ela coloca duas classes na tag <section> que são elas: "principal" e "container", como mostrado abaixo:
    <section class="principal container">
    
  • Já na segunda seção ela também coloca duas classes, a diferença é que ela reutiliza uma classe já existente chamada "container" que tem o estilo do Grid e a separação de duas colunas e o tamanho da altura:
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 50% 50%;
    }
    
  • No caso na segunda, terceira e quarta seções ela faz essa repetição de repetir os estilos da seção dois, pois você pode ver que ela usa essa linha de código para repetir os estilos das classes "container" e "secundario":
    <section class="container secundario">
    

Então no geral era isso. Espero ter explicado bem, caso você não tenha entendido algo eu peço que me pergunte/avise para que eu mude a metodologia tá! ;)


Agora sobre seu problema com o estilo do texto e imagens que não estar funcionando como deveria:

Para mim poder lhe ajudar melhor nesse caso eu iria precisar do projeto completo, incluindo o HTML, os arquivos CSS, e principalmente, as imagens usadas no projeto.

Isso claro para que eu possa reproduzir o mesmo ambiente que o seu e testar tudo da melhor forma.

Para isso seria recomendado exportar o projeto para o GitHub. Mas se você não sabe fazer isso, não se preocupe, a instrutora Moni Hillman ensina de uma forma bem fácil como fazer isso nessa aula aqui.

Então para uma ajuda mais personalizada e específica para o seu caso, eu peço que exporte o projeto para o Github, ou disponibilize os arquivos e informações necessárias para que eu reproduza seu projeto em minha máquina e faça os devidos testes para lhe ajudar da melhor forma.

Era isso, caso precise eu estarei por aqui!

Abraços e bons estudos.

Bom dia, estou com o mesmo problema com o mesmo projeto rsr (o estilo do texto e imagens que não estar funcionando como deveria).. poderia me auxiliar por favor?

O link do meu repositorio é https://github.com/dev-saulo/alura-plus

Update: Situação resolvida.

Olá Saulo, tudo bem contigo?

Eu fico feliz que você conseguiu resolver o problema que você tinha no seu projeto, eu só preciso avisar que o link de acesso ao seu projeto no GitHub está quebrado, sugiro que você verifique isso e arrume, somente para deixar seu repositório mais organizado e limpo.

Era isso, ah e Paloma, você conseguiu resolver os problemas com o seu projeto?

E as dúvidas foram sanadas?

No geral era isso, caso precise estarei aqui!

Abraços e bons estudos.

Olá, obrigada, conseguir resolver rs era apenas uma (class) que estava com - e não tinha - rs! depois de muito quebrar a cabeça conseguir achar ... obrigada pela atenção.

Olá Paloma, tudo bem contigo?

Fico feliz que você conseguiu resolver o problema sozinha!

Caso precise estarei por aqui!

Abraços e bons estudos.

Dúvidas sanadas e link do projeto atualizado, Muito obrigado Renan Cezar.

Ola, tudo bem? estou com essa mesma dificuldade pra alinhar o texto com a imagem no secundário. O texto saiu embaixo da imagem e ja tentei diversas formas de colocar do lado dela

Olá Bruno, tudo bem ? Então, no meu projeto conseguir resolver, era apenas uma (class) que estava com - e não tinha rs! Confere com atenção as class, no HTML e no CSS se estão iguais, Espero que você consiga resolver! Qualquer dúvida estou a disposição, bons estudos!

vou conferir direitinho, e depois retorno aq, obrigado

Fico aguardando, em alguns momentos do código a docente, usa duas class, ex (

isso que me confundiu, são duas class em uma mesma linha !

Oi, desculpa a demora, consegui arrumar! O meu era na Section do conteiner principal estava com__ e não tem