Carrosel de imagens no navegador do celular abre com mais espaço.

[rafabritodf 0]

Prezados,

 

Estou com um problema chatinho no carrossel de imagens. Recentemente comecei a implementar esse carrossel e no browser do computador ele abri legal contudo no celular ele fica com um espaço logo depois da imagem. irei compartilhar o link aqui do GitHub, vocês irão visualizar normal no navegador, quando clica em inspecionar vocês irão visualizar ele com um espaço enorme abaixo da imagem.

 

Link: https://almondhorizon.github.io/Atelie/

 

Alguém com mais experiencia poderá me ajudar? 

 

Agradeço a atenção de todos.

 

Atenciosamente,

Rafael Brito

[Maujor 144]

Transcrevo a seguir a última regra CSS que encontrei na folha de estilos scrolling-nav.css. 

.carousel-item {
  height: 67vh;
  min-height: 300px;
  background: no-repeat scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  overflow: hidden;
  margin: 0 auto;
}

Aquela folha de estilos é do plugin ScrollingNav e a regra de estilo para .carousel-item que encontrei foi você ou alguém que colocou  ali.
De toda forma o que interessa é que a declaração height: 67vh;  está causando o "espaço enorme abaixo da imagem".
Ajuste aquela altura para algo em torno de height: 37vw;  (atenção vw) e para viewport menor que 800px use media query para ajustar a altura para outro valor menor. Se necessário altere min-height também.

Dica: Como regra geral nunca altere arquivos de código padrão fornecido com templates, plugins, frameworks etc.
Por exemplo: para inserir regras de estilo personalizadas no framework Bootstrap ou em plugins crie uma folha de estilos separada (personalizada.css, app.css, meus-estilos.css, meu-plugin-scroll, meu-slide ou lá o que for) e link para a aplicação depois de todos os links para folhas de estilos.

[rafabritodf 0]

3 horas atrás, Maujor disse:

Transcrevo a seguir a última regra CSS que encontrei na folha de estilos scrolling-nav.css. 

.carousel-item {
  height: 67vh;
  min-height: 300px;
  background: no-repeat scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  overflow: hidden;
  margin: 0 auto;
}

Aquela folha de estilos é do plugin ScrollingNav e a regra de estilo para .carousel-item que encontrei foi você ou alguém que colocou  ali.
De toda forma o que interessa é que a declaração height: 67vh;  está causando o "espaço enorme abaixo da imagem".
Ajuste aquela altura para algo em torno de height: 37vw;  (atenção vw) e para viewport menor que 800px use media query para ajustar a altura para outro valor menor. Se necessário altere min-height também.

Dica: Como regra geral nunca altere arquivos de código padrão fornecido com templates, plugins, frameworks etc.
Por exemplo: para inserir regras de estilo personalizadas no framework Bootstrap ou em plugins crie uma folha de estilos separada (personalizada.css, app.css, meus-estilos.css, meu-plugin-scroll, meu-slide ou lá o que for) e link para a aplicação depois de todos os links para folhas de estilos.

 

[rafabritodf 0]

Maujor,

 

Primeiramente agradeço imensamente pelas dicas, irei seguir as dicas nas folhas de estilos!

 

Obs: Coloquei dessa forma como falou e deu certo, veja abaixo. Virei teu fã mestre. 

 

@media only screen and (min-width:510px) {

.carousel-item {

height: 31vw;

min-height: 160px;

background: no-repeat scroll;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: 100%;

      }

}

 

Forte abraço.

[rafabritodf 0]

Em 18/04/2018 at 20:51, Maujor disse:

Maujor, Bom dia

De um  Help aqui mestre? 

 

Conforme a imagem abaixo visualizado no mobile apple iphone 7 mais preciso, o carrossel corta a imagem seguindo esse código citado acima. Pode-me ajudar? 

 

Rafael Brito

 

 

[Maujor 144]

Em 19/04/2018 at 00:15, rafabritodf disse:

Obs: Coloquei dessa forma como falou e deu certo, veja abaixo. Virei teu fã mestre. ...

 

Retire a que você colocou e coloque as seguintes:

.carousel-item {
  height: 25vw;
  min-height: 120px;
  background: no-repeat scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: 100%;
   }
@media only screen and (min-width:510px) {
.carousel-item {
  height: 31vw;
  }
}
@media only screen and (max-width:510px) {
section { padding:50px 0;}
}