1
resposta

Flexbox - Aula 04, Atividade 02, Elementos filhos estourando a largura do container pai.

Olá, estou tentando posicionar os logos dos patrocinadores, porém mesmo seguindo as indicações do professor, os elementos estão estourando a largura do container pai.

O que acontece:

print-ul-size.png

HTML

<section class="rodapePrincipal-patrocinadores">
    <div class="container">
        <ul class="rodapePrincipal-patrocinadores-list">
            <li>
                <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
                    <img src="img/logos/alura.svg" alt="Logo da Alura">
                </a>
            </li>
            <li>
                <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
                    <img src="img/logos/caelum.svg" alt="Logo da Caelum">
                </a>
            </li>
            <li>
                <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
                    <img src="img/logos/cdc.svg" alt="Logo da Casa do Código">
                </a>
            </li>
        </ul>
        <form class="rodapePrincipal-contatoForm" action="#">
            <fieldset>
                <legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre em contato conosco</legend>
                <div class="rodapePrincipal-contatoForm-fieldset"> 
                    <input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
                    <button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
                </div>
            </fieldset>
        </form>
    </div>
</section>

CSS

.rodapePrincipal-patrocinadores .container {
        flex-direction: column;
        align-items: center;
    }

    .rodapePrincipal-patrocinadores-list {
        margin: 0;
        width: 100%;
    }

    .rodapePrincipal-contatoForm {
        width: 100%;
        text-align: center;
    }

    .rodapePrincipal-contatoForm-legend {
        width: 100%;
    }

    .rodapePrincipal-contatoForm-fieldset {
        justify-content: center;
    }
1 resposta

Olá, Leonardo! Tudo bom?

Você adicionar o display: flex na classe .rodapePrincipal-patrocinadores-list também para organizar esses itens como achar melhor (dividir espaço, ou usar wrap pra eles irem pra linha debaixo quando ocuparem o espaço máximo). E, ainda assim, dá uma olhada no tamanho das imagens! É legal deixar o max-width (ou o width mesmo) pra ser 100% e o height: auto.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software