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

[Dúvida] duvida

Referente ao curso CSS: construindo layouts com Grid, no capítulo Finalizando o AluraCast e atividade Desafio: o Grid do footer

por Daniele Peres Sanches
| 56.1k xp | 12 posts
.rodape {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns: auto 2fr auto 1fr repeat(3, auto) 1fr auto 1.5fr repeat(2, auto);
    column-gap: 0.5rem;
    align-items: center; 
}
.rodape__imagem {
    grid-row: 1/3;
}
.rodape__subtitulo, .rodape__horario--inicio, .barra__container--reproducao, .rodape__botao--volume-down, .rodape__horario--termino, .barra__container--volume, .rodape__botao--volume-up  {
    grid-row: 2/3;
}
.rodape__botao--voltar {
    grid-column: 4/5;
}
.barra__container--reproducao {
    grid-column: 4/9;
}
.rodape__botao--voltar {
    grid-column: 4/5;
    justify-self: end;
}
.rodape__botao--proximo {
    justify-self: left;
}
.rodape__botao--volume-down {
    justify-self: end;
}

print do liveserver No liveserver Print fora do liveserver Fora do live serverPorque a barra__container--reproducao ta passando o que foi escrito no codigo que é de 4 a 9 fora do liveserver

Grid no footer fora do liveserver Grid no footer

2 respostas
solução!
por Maria Eduarda Gonçalves Furlan
| 1937.8k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Olá, Daniele! Tudo bem?

Sinto muito que está com esse problema. Vamos resolver isso!

Analisando o código que você postou, percebi que a classe .barra__container--reproducao está definida para ocupar as colunas de 4 a 9. No entanto, nas imagens que você compartilhou, parece que essa barra está indo além dessas colunas.

Uma possível explicação para isso é que a largura total do grid do footer está ultrapassando o espaço disponível na tela. Isso pode acontecer se houver algum elemento pai com uma largura fixa ou se houver algum padding ou margin aplicado no grid.

Uma forma de resolver isso é ajustar a largura do grid para que ele caiba dentro do espaço disponível. Você pode tentar diminuir a largura total do grid, ajustando as proporções das colunas. Por exemplo, em vez de utilizar 2fr, 1fr, 1.5fr, você pode tentar utilizar proporções menores, como 1fr, 0.5fr, 0.75fr. Dessa forma, o grid ficará mais compacto e poderá caber dentro do espaço disponível.

Além disso, verifique se não há nenhum elemento pai com uma largura fixa que esteja limitando o tamanho do grid. Certifique-se também de que não há nenhum padding ou margin aplicado diretamente no grid que esteja causando esse problema.

Espero que essas sugestões possam te ajudar a resolver o problema com o grid do footer. Se tiver mais alguma dúvida, é só me dizer!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Daniele Peres Sanches
| 56.1k xp | 12 posts

alterei a width para 30vw e deu certo na classe .barra__container--reproducao, .rodape__barra--reproducao div, alem de usar proporçoes menores

.barra__container--reproducao, .rodape__barra--reproducao div {
    width: 37vw
}

.barra__container--reproducao, .rodape__barra--reproducao div {
    width: 30vw
}