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

text-align: left não está fazendo sentido.

Olá e desde já agradeço a ajuda.

Logo no final do vídeo, para fazer o "desktop" ele adiciona o .conteudo__titulo{text-align: left} para com que toda a seção SOBRE fique alinhada a esquerda.

Entretanto a class="conteudo__titulo" engloba apenas o "< h2 >SOBRE</ h2 >", logo a única parte que é jogada para a esquerda é o título. Não consegui entender o porque de pra ele ter dado certo alinhar tudo a esquerda dessa forma. E (se tem algo errado) qual seria a forma correta?

4 respostas

postando meu código para validar.

<section class="sobre container">
                <div class="sobre__conteudo">
                    <h2 class="sobre__titulo">Sobre</h2>
                    <p class="sobre__texto">Criamos aplicativos personalizados para <strong class="sobre__texto--destaque">todas as pessoas</strong>!</p>
                    <p class="sobre__texto">
                        A manutenção de um aplicativo não pode ser um custo extra para o cliente, Na Apeperia você assina nosso serviço e a manutenção já está inclusa. Assim, você não se preocupa com manutenção, é tudo por nossa conta.
                    </p>
                    <p class="sobre__texto sobre__texto--destaque sobre__texto--divisao">
                        Conte com uma equipe especializada e exclusiva pra projetos incríveis em qualquer plataforma.
                    </p>
                    <ul class="sobre__plataformas">
                        <li><img src="img/android.png" alt="Ícone do Android"></li>
                        <li><img src="img/blackberry.png" alt="Ícone da Blackberry"></li>
                        <li><img src="img/apple.png" alt="Ícone da Apple"></li>
                        <li><img src="img/windowsphone.png" alt="Ícone da Microsoft"></li>
                    </ul>
                    <p class="sobre__texto">Desenvolvemos aplicativos para todas as plataformas</p>
                </div>
                <img src="img/sobre-apeperia.png" alt="Sobre a Apeperia" class="sobre__imagem">
            </section>
.sobre {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.sobre__titulo {
    color: var(--cinza-escuro);
    font-weight: 700;
    font-size: 1.5rem;
    font-family: var(--montserrat);
    text-transform: uppercase;
    text-align: center;

    margin-bottom: 1.25rem;
}

.sobre__texto {
    line-height: normal;
    text-align:center;
    margin-bottom: 1rem;
}

.sobre__texto--destaque {
    color: var(--cinza-escuro);
    font-weight: 700;
}

.sobre__plataformas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    margin-bottom: 1rem;
}
.sobre__imagem{
    display: none;
}
@media screen and (min-width: 1024px){
    .sobre{
        display: flex;
    }
    .sobre__conteudo{
        margin-right: 3rem;
    }
    .sobre__titulo{
        text-align: left;
    }
    .sobre__texto--divisao{
        border-bottom: 1px solid var(--cinza-medio);

        padding-bottom: 1.5rem;
    }
    .sobre__imagem{
        display:block;
    }
}

Você falou .conteudo__titulo{text-align: left} essa classe não esta descrita no código acima, depois você disse:

class="sobre__titulo" engloba apenas o "< h2 >SOBRE</ h2 >". observe que as class não são iguais, daria para especificar o código inteiro ou ver onde esta o erro.

Olha nao sei se entendi muito bem. Mas voce quer colocar todo o conteudo da <div ="sobre__conteudo"> na esquerda, correto?

O fato de sò o h1 estar ficando no centro pelo que vi no seu codigo quando voce ta estilizando pra uma @media screen and (min width>1024px) é porque voce diz pro h1 text-algin:left;. Porem para o* p* class ="sobre__texto" voce declara fora da media text-align:center, e depois voce nao declara mais nada no "@media 1024px". Entao ele continua assumindo um comportamento de text-align:center.

Eu aconselho voce a mudar entao o text-align sò no div class="sobre__conteudo" e tirar o text-align:center do p class="sobre__texto"

.sobre__texto {
    line-height: normal;
    margin-bottom: 1rem;
}

@media screen and (min-width: 1024px){

    .sobre__conteudo{
        margin-right: 3rem;
        text-align:left;
    }
solução!

Obrigado pela ajuda, eu "viajei".