Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

A terceira borda (ultima a direita) esta com a altura menor que as outras , pq?

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Lidando com bordas e atividade CSS para os cantos arredondados

por Kate keiroz
| 85.7k xp | 10 posts

header{ background-color: #bbbbbb; padding: 20px 0; }

.caixa{ position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right:0; }

nav li { display: inline; margin: 0 0 0 15px; }

nav a { text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none;

}

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.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: 2px solid black; border-radius: 10px; }

.produtos h2{ font-size: 30px; font-weight: bold;

}

.description{ font-size: 18px; }

.price { font-size: 22px; font-weight: bold; margin: 10px 0 0; }

5 respostas
por Guilherme Vitorino da Silva
| 244k xp | 125 posts

Olá Kate,

Você pode por gentileza enviar o código html para que possamos dar uma olhada?

por Kate keiroz
| 85.7k xp | 10 posts
<main>
      <ul class="produtos">
      <li>
        <h2>Hair cut</h2>
        <img src="/Users/katekeiroz/Documents/KATE DOCS/CURSOS/ALURA FORMACAO FRONTEND/AULA 2 - HTML:CSS/cabelo.jpg">
        <p class="description"> With scissors or with the machine, as the client prefers</p>
        <p class="price">25€</p>
      </li>
      <li>
        <h2>Beard</h2>
        <img src="/Users/katekeiroz/Documents/KATE DOCS/CURSOS/ALURA FORMACAO FRONTEND/AULA 2 - HTML:CSS/barba.jpg">
        <p class="description">Professional beard cutting and styling</p>
        <p class="price">18€</p>
      </li>
      <li>
        <h2>Hair + Beard</h2>
        <img src="/Users/katekeiroz/Documents/KATE DOCS/CURSOS/ALURA FORMACAO FRONTEND/AULA 2 - HTML:CSS/cabelo+barba.jpg">
        <p class="description"> PACK OFFER , Hair + Beard </p>
        <p class="price">35€</p>
      </li>
    </ul>
por Guilherme Vitorino da Silva
| 244k xp | 125 posts

Kate,

O terceiro card fica com um tamanho menor porque o texto descritivo dele é mais curto que o texto dos demais cards.

Tente inserir mais dígitos na descrição do terceiro card e veja que ele ficará com o mesmo tamanho dos demais

<li>
        <h2>Hair + Beard</h2>
        <img src="/Users/katekeiroz/Documents/KATE DOCS/CURSOS/ALURA FORMACAO FRONTEND/AULA 2 - HTML:CSS/cabelo+barba.jpg">
        <p class="description"> PACK OFFER , Hair + Beard (With more words..........) </p>
        <p class="price">35€</p>
      </li>
por Kate keiroz
| 85.7k xp | 10 posts

ahhh resolvido , thanks

solução!
por Guilherme Vitorino da Silva
| 244k xp | 125 posts

Kate,

Você pode por gentileza marcar o tópico como resolvido?

Obrigado,