Entrar Ainda não tem acesso?
5
respostas

Não compreendi a lógica da borda da receita

por Victor de Assunção
| 41.3k xp | 11 posts
Aprendiz

No video, ele bota um padding em cima e no lado esquerdo na classe:

.recipes {
    background-color: #e5e5e5;
    display: flex;
    flex-wrap: wrap;
    padding: 5rem 0 0 5rem;

}

Depois coloca um margin em baixo e no lado direito na classe:

.recipe {
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    margin-right: 5rem;
    width: calc(25% - 5rem);
}

Mas essa lógica ficou meio confuso na minha cabeça, porque o width ele botou 25% - 5rem (que é o tamanho do margin)

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeo que é esse espaço roxo do lado do espaço em azul? qual que é a logica disso? porque que quando eu coloco o width: calc(25% - 5rem); ele some?

5 respostas
por Germanna De Fatima Oliveira De Lima
| 309.2k xp | 307 posts

Oi Victor, tudo bem? Eu desconfio que esse roxo é decorrente do flex display: flex; flex-direction: column;

Ele que tá forçando teu layout ficar nessa posição. testa desmarcar eles e fazer a mudança do width, vai desconfigurar, mas só para saber se é ele que tá forçando tua largura a ficar no lugar.

Fico no aguardo das noticias...

por Victor de Assunção
| 41.3k xp | 11 posts
Aprendiz

Eu retirei os

  • display: flex;
  • flex-direction: column;
  • width: calc(25% - 5rem);

Ficou dessa maneira:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Germanna De Fatima Oliveira De Lima
| 309.2k xp | 307 posts

Oi Victor, faz o seguinte, coloca teu código dentro </>, assim, eu posso olhar se não tem outro na hierarquia que está forçando a disposição.

fico no aguardo. Bons estudos

por Victor de Assunção
| 41.3k xp | 11 posts
Aprendiz

Eu vou ter que dividir em 2 comentários, um com apenas o HTML referente a Section das receitas, e o outro com CSS, pois se não excede o limite de caracteres

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Fruta & Fruto</title>
        <link href="./assets/css/normalize.css" rel="stylesheet" />
        <link href="./assets/css/reset.css" rel="stylesheet" />
        <link rel="stylesheet" href="./assets/css/receita/receita.css">
        <link rel="stylesheet" href="./assets/css/receita/receita-botao.css">
        <link rel="stylesheet" href="./assets/css/receita/receita-conteudo.css">
        <link rel="stylesheet" href="./assets/css/receita/receita-descricao.css">
        <link rel="stylesheet" href="./assets/css/receita/receita-imagem.css">
        <link rel="stylesheet" href="./assets/css/receita/receita-titulo.css">
        <link rel="stylesheet" href="./assets/css/receitas.css">
    </head>
    <body>
        <section class="receitas">
            <div class="receita">
                <img alt="Tigela de abacate" class="receita__imagem" src="./assets/img/receitas/tigela-de-abacate.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Tigela de abacate</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
            <div class="receita">
                <img alt="Salada de kiwi" class="receita__imagem" src="./assets/img/receitas/salada-de-kiwi.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Salada de kiwi</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
            <div class="receita">
                <img alt="Mix de vegetais" class="receita__imagem" src="./assets/img/receitas/mix-de-vegetais.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Mix de vegetais</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
            <div class="receita">
                <img alt="Pimentões à Juliana" class="receita__imagem" src="./assets/img/receitas/pimentoes-a-juliana.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Pimentões à Juliana</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
            <div class="receita">
                <img alt="Prato oriental" class="receita__imagem" src="./assets/img/receitas/prato-oriental.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Prato oriental</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
            <div class="receita">
                <img alt="Beterrabas assadas" class="receita__imagem" src="./assets/img/receitas/beterrabas-assadas.jpg" />
                <div class="receita__conteudo">
                    <h4 class="receita__titulo">Beterrabas assadas</h4>
                    <p class="receita__descricao">Receita refrescante e cheia de vitaminas para seu café da manhã.</p>
                    <button class="receita__botao">Ver receita</button>
                </div>
            </div>
        </section>
    </body>
</html>
por Victor de Assunção
| 41.3k xp | 11 posts
Aprendiz

CSS:

receita-botao (css)

.receita__botao {
    background: #8d0606;
    border: none;
    border-radius: 5px;
    color: #fdfdfd;
    padding: 1rem;
    transition: all .1s ease-in-out;
}

.receita__botao:hover {
    background: #620404;
    cursor: pointer;
}

receita-conteudo (css)

.receita__conteudo {
    padding: 1rem;
}

receita-descricao (css)

.receita__descricao {
    font-size: 1.1875rem;
    line-height: 1.5;
    text-align: justify;
}

receita-imagem (css)

.receita__imagem {
    height: 200px;
}

receita-titulo (css)

.receita__titulo {
    font-size: 1.4375rem;
}

receita (css)

.receita {
    background: #fdfdfd;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    margin-right: 5rem;
    width: calc(25% - 5rem);
}