Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
>
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.
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.>
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
>
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%;
}.carousel-item {
height: 31vw;
}
}
Transcrevo a seguir a última regra CSS que encontrei na folha de estilos scrolling-nav.css.
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.