Display: inline-block em <li> para elementos grandes.

Oi Laisse,

Dei uma olhada no código.

No CSS você declarou o inline-Block na classe "about" que foi chamada no nível <ul>. O que o sistema vai entender é que você quer criar um único bloco de <ul> que receberá informações da classe.

Para ter o efeito que você deseja o inline-block precisa ser definido dentro das tags que você deseja deixar lado a lado.

No CSS:

Acrescente o display: inline-block na classe .me

.me {display: inline-block; width: 50%;}

No HTML:

Na linha 46, onde tem o <p> que você quer deixar ao lado das imagens adicione a ele também o class="me", desse jeito as imagens vão ocupar metade da tela e o <p> a outra metade <p class="me">

No caso de você querer mudar a proporção de cada um na tela você vai precisar de uma nova classe para aquele parágrafo ou definir o inline-block dentro da própria tag.

Em resumo a página não esta ficando como você quer porque as imagens e o <p> estão sendo tratados como um único bloco

Oi Gabriel,

Eu acho que não fui muito clara, porque o que eu quero é que cada "li" seja uma coluna com: Título Imagem parágrafo parágrafo

E então a página ficaria com três colunas lado a lado, uma para cada "li".

Isso foi o que o professor fez. Eu tirei print para você ver os passos: https://imgur.com/a/Qf7epaI

Porque ele literalmente só faz isso. Põe a classe do "ul" como "produtos" e no CSS ele coloca:

.produtos li {
    display: inline-block
}

Salva o CSS, recarrega a página e os "li" ficam lado a lado. Os width de 30% fui eu quem colocou para ver se o problema era o tamanho das imagens que eu usei.

.music {
  background-color: #2B2D42;
  width: 30%;
}

.psychology {
  width: 30%;
}

.me {
  width: 30%;
}

Mas só isso não resolveu. Por isso que eu escrevi que eu acho que o tamanho do texto do parágrafo influencia.

Você pode dar uma olhada nas imagens e vê se dá pra entender melhor a minha dúvida?

Obrigada!

Oi Laissa,

Por sorte eu mantive baixada a aula no meu PC e dei uma olhada no seu código.

1º Passo:

No curso da barbearia Alura o professor especificou no CSS que a largura da tag main seria de 940px. Você pode usar uma medida relativa (85% por exemplo), com isso ele criou um bloco de 940px de largura onde todos as tags filhas seriam organizadas. Além disso, ele autoformatou as margens laterais e amnteve a superior e inferior em 40px, assim:

main{
    width: 940px;
    margin: 40px auto;
}

2º Passo

Ele declarou quais seriam as margens da tag <ul> como um todo e com isso todo a largura de 940px foi usada no exercício:

.produtos{
    margin: 0 auto;
}

3º passo: ele especificou individualmente como cada tag <li> deveria se parecer

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1,5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: solid #000000 2px;
    border-radius: 15px;
}

4º passo:

Elimine o classe "me" dentro da tag da "img", para que a tag "li" se comporte como um bloco único, do jeito como o código esta agora a imagem vai ocupar 30% da tela só que o texto vai tentar ocupar 100%

Quando você puxa uma imagem é importante definir quanto espaço ela vai ocupar. Com os ajuste final que ele fez na

• ele declarou o seguinte:

  Dentro da tag "main" que tem 940px eu quero colocar uma tabela "ul" sem margem superior ou inferior e que as margens laterais se autoformatem. Por fim ele definiu que dentro desse espaço da "ul" vai existir uma lista "li" e cada "li" vai ocupar individualmente 30% do espaço total dentro da "ul" (o que da uma ocupação de 90% e sendo assim cabe tudo dentro de uma única linha)

  Além disso ele colocou margens laterais de 1,5% (como existe 3 "li" e cada lateral ocupar 1,5% então na prática cada "li" ocupa na verdade 33% do espaço dentro da tag "ul" (perfazendo um total de 99%, o que ainda cabe em uma única linha)

  No seu código você não formata o tamanho total que a tag "ul" deve ter e nem a tag "li". O que o programa entende é que você quer usar as imagens no seu estado natural. É por isso que suas imagens e textos não se alinham como na aula, o programa não sabe como eles devem parecer.

  Se especificar apenas o width das tags "li" em 30% você vai obter um resultado semelhante ao da aula. Mas acredito ser interessante definir pelo menos o width da tag "ul" que engloba as tags "li"

Nossa! Gabriel, muito obrigada! Eu vou reescrever meu código para ver passo a passo como as coisas vão se ajustando.

Muito obrigada mesmo!