3
respostas

Espaço para formulário

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

Consegui resolver esse problema ajustando as medidas dos conteúdos da seguinte forma:

    .rodapePrincipal-patrocinadores-list {
    display: flex;
    align-items: center;    
    justify-content: space-between;
    width: 79%;
}    
.rodapePrincipal-contatoForm {
    margin-top: 20px;
    text-align: center;
    width: 19%;

}

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

3 respostas

Me desculpem! Travou tudo aqui quando tentei enviar , por isso a mesma questão aparece 3x

Não ficou muito claro. A a soma da ocupação de ambos os elementos têm que dar 100% ou não precisa?

Oi Rosilene, tudo bem com você?

Muito obrigada pela paciência em esperar um retorno.

Basicamente, a propriedade width: 100% representa a largura total da página em que você está trabalhando ou do elemento pai(quando existe um), então quando o instrutor coloca nos elementos da página valores que somados dão 100%, ele está garantindo que esses elementos ficarão bem distribuídos no espaço total. Mas você pode sim colocar valores que dão menos que 100%, como você fez, que somando o width: 79% e o width: 19%, que resulta em 98%, daí você fica com 2% de espaço vago na largura total. Isso provavelmente não vai te gerar nenhum problema, apenas esses 2% não vão estar sendo controlados no estilo. O que pode te gerar problemas seria se essa soma passasse de 100%, daí é bem provável que isso acabasse quebrando o seu layout. Caso queira, você pode adicionar os 2% que faltaram como margin-right(margem da direita) da .rodapePrincipal-patrocinadores-list para colocar um espacinho maior entre a logo da casa do código e o formulário de contato, assim como o instrutor fez no código abaixo na aula, mas fica a seu critério:

.rodapePrincipal-patrocinadores-list {
    display: flex;
    align-items: center;    
    justify-content: space-around;
    width: 70%;
    margin-right: 5%;
}    

.rodapePrincipal-contatoForm {
    width: 25%;
}

Como recomendações, deixo aqui um artigo para que você complemente ainda mais seus estudos de Flexbox e a documentação completa da propriedade width do CSS:

Espero ter solucionado sua questão.

Caso ainda tenha alguma dúvida, me coloco à disposição!

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

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