Entrar Ainda não tem acesso?
1
resposta

Espaços grandes - Responsividade

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Compartilhando o projeto e atividade Conclusão

por ROGERIO S BATISTA
| 20.4k xp | 2 posts

o espaçamento entre as section ficou muito grande quando passa a ser responsivo.

segue link e o código anexo.

https://suporteadefix.github.io/movieflix/

Códigos:`

HTML:

O melhor streaming que você pode ter com filmes, séries e documentários

logo do Movieflix Assine por R$17,90/Ano* Assine por R$ 22,90/Mês*

* O preço pode variar caso a assinatura seja feita em outros planos.

ícone de plataformas

Assista do seu jeito

Aproveite a tela grande da TV ou assista no Tablet, laptops, smartphones ou em outros aparelhos. Nossa seleção de filmes e séries não para de crescer.

O Movieflix oferece um cátalogo imenso de filmes, séries documentários e transmissão ao vivo.

Assine Já
imagem de telas imagem do notebook

Baixe Filmes e Séries

Baixe e assista como quiser e onde quiser. Assim seus favoritos estão sempre com você, até mesmo sem internet.

Disponível nos seus dispositivos favoritos

  • Imagem da TV

    TV

  • imagem do computador

    Computador

  • imagem do celular

    Celular

logo Movieflix

CSS (parte responsiva):

@media screen and (max-width:768px) { .container {

display: block;
background-image: none;
}

.container-imagem {
    width: 50vw;
}

.container-caixa {
    margin: 2em 2em;
}

.secundario {
    margin: 0;
    text-align: center;

 }
 
 .secundario-imagem {
    width: 50vw;
 }

 .dispositivo-lista {
    display: block;
 }

 .rodape-lista {
    display: block;
 }
}

`

1 resposta
por Estudante
| 303k xp | 944 posts

Rogério, pelo que você descreveu e compartilhou, o espaçamento exagerado entre as <section> ao tornar o layout responsivo provavelmente está relacionado às margens aplicadas nas classes como .container-caixa, ao layout em block, ou à falta de controle explícito de padding/margin nas <section> em dispositivos menores.

Margem excessiva da .container-caixa

.container-caixa {
    margin: 2em 2em;
}

Isso define espaçamento externo (fora da caixa) tanto no topo/baixo quanto nos lados. Em telas pequenas, 2em pode parecer muito. Teste com valores menores:

.container-caixa {
    margin: 1em;
}
  1. Margin entre sections — ausente controle específico

Se suas <section>s não têm uma margem controlada diretamente, o navegador pode estar aplicando uma margem padrão. Recomendo que você defina margens específicas para as <section>s no media query:

@media screen and (max-width: 768px) {
  section {
    margin: 1em 0;
    padding: 0;
  }
}

Adicione um reset leve para limpar margens excessivas em dispositivos móveis:

@media screen and (max-width: 768px) {
  h1, h2, p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}

Ferramenta útil: DevTools do navegador

Use o Inspecionar Elemento no navegador (F12) para ver de onde vem o espaçamento. No modo responsivo, selecione a <section> e observe as margins e paddings no box model.