Ir para conteúdo
rafabritodf

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

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Gostei 1
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

 

 

image1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites
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;}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.