Banner responsivo desalinhado

[carlosp 0]

Pessoal, estou com um problema de centralização do banner rotativo nos Smartphones. Abaixo segue o link do site:

LINK DO SITE

Podem me orientar como deixa-lo centralizado?

[leonardo de andrade baessa 16]

Não entendi.

[carlosp 0]

Ao acessar o site pelo smartphone o banner rotativo fica desalinhado, ou seja, ela está pegando um percentual do lado "direito". Queria saber se tem algum jeito de deixar ele com altura "fixa" e exibir o conteúdo centralizado....

[Maujor 144]

Olá carlosp

Você precisa personalizar o carrossel do Bootstrap.

 

Faça o seguinte:

Coloque a seguinte regra CSS media query incorporada na seção head da página que usa o carrossel (HOME).

<style rel="stylesheet">
@media only screen and (min-width: 0px) {
 #carousel-banner .carousel-inner > .item > img, #carousel-banner .carousel-inner > .item > a > img {
  max-width: 100%;
  height: auto;
  margin-left: 0;
 }
}
</style>

É importante que esta regra fique posicionada DEPOIS de todos os links para as regras de estilo da página. Para evitar dúvida coloque-a antes da tag de fechamento da seção head (</head>)

 

 

[carlosp 0]

O código anterior estava dessa forma, porém o "criente" achou que a proporção está muito inferior comparada com as outras chamadas. A unica solução pra aumentar o banner foi usar uma altura padrão, porém ele não se enquadra. =(

[Maujor 144]

Faça uma revisão da declaração margin-left negativa para cada breakpoint do carrossel. Se necessário crie mais breakpoints para definir aquela margem.

[leonardo de andrade baessa 16]

@media only screen 
and (max-width : 640px){	
	#boxes .container .box h1{
		line-height: 35px;
		font-size: 35px;
	}
	
	#boxes .container .box p{
		font-size: 18px;
	}
	#carousel-banner .carousel-inner > .item > img, 
	#carousel-banner .carousel-inner > .item > a > img{
		;
	}

irmão como aqui é as medidas padrões para telas com no máximo 640px.

você define um tamanho específico para as imagens. diminuindo elas do seu tamanho normal para que ela caiba dentro de uma tela nessas medidas contanto a maioria desses carrousel não se ajusta.

então eu recomendaria a você que ao invés de colocar as frases fixas nas imagens como está lá que fszesse uma nova class colocando a frase em um lugar ajustado no carrousel. ai essa class seria um pouco mas fácil de de você levar um texto sobreposto na image para qualquer direção.