1

Eu tenho esse site que contém um slider o problema que está acontecendo é que dependendo do tamanho da tela o espaçamento entre cada slide muda, alguém tem alguma ideia de como resolver isto?

Estou usando o plugin bxslider. O certo era ter um espaçamento de 14px, mesmo definindo e tudo, dependendo da resolução muda, por exemplo, na resolução 1920x1080 fica certo, mas se mudar de resolução dá problema.

Como proceder?

1
  • Você deveria especificar melhor de qual "espaçamento" estás falando, porém eu deduzi duas coisas que poderiam estar dando problema, caso eu esteja errado, edite sua questão informando o espaçamento desejado Commented 4/02/2014 às 10:25

2 Respostas 2

1

Crie seu slide responsivo, é bem mais simples e evita muita dor de cabeça.

/* Desktop maiores */
@media (min-width: 1200px) { ... }

/* tables em formato porta retrato até os desktos no formato paisagem */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* dispositivo em paisagem até os tablets em formato porta-retrato */
@media (max-width: 767px) { ... }

/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }

Assim você consegue atingir um publico bem maior e resolver seu problema, caso você não entenda no lugar dos ... você coloca seu css usando o max-width como base na resolução.

1
  • 1
    Embora essa não seja a solução do problema, mas uma boa recomendação, seria melhor ainda se ela fosse "mobile first", mais ou menos isso: faça o site como se fosse para um celular, adapte-o para funcionar em telas maiores. Do exemplo, tente tirar todos os max-width (mais informações: html5rocks.com/en/mobile/responsivedesign). Commented 4/02/2014 às 17:57
0

Acredito que o espaçamento que estejas falando é a propriedade padding do CSS, por isso com este codigo CSS, você terá o espaçamento correto, porém o correto seria aprender a fazer a alteração direto no seu plugin, você deveria procurar a documentação do tal bxslider e ler para aprender a usa-lo corretamente.

Caso não seja esta propriedade, que resolva seu problema, por favor, explique mais detalhadamente de qual "espaçamento" estás falando.

Porém estou deduzindo que seja um dos dois códigos abaixo que resolvam seu problema:

.slide_txt {
    padding-left: 14px !important;
}

Ou seria este aqui:

.bxslider li {
  margin-right: 14px !important;
}

O seletor !important faz com que todas as outras definições do mesmo elemento e mesma propriedade sejam ignoradas e torna esta a mais importante.

10
  • Seria sobre o slide_txt? seria o espaçamento tipo entre a li, o slide_txt seria a parte de texto dentro. Então, o bxslider tem uma propriedade para isso slideMargin Margin between each slide Mas dá o mesmo problema Commented 4/02/2014 às 10:25
  • então o correto seria este segundo código que postei na minha ultima edição veja Commented 4/02/2014 às 10:26
  • mesmo assim parece que não dá, estranho que o plugin muda o tamanho da li, acho que este é o ponto que está dando problema, vou tentar achar a parte que muda para corrigir Commented 4/02/2014 às 10:31
  • Mas não há como o plugin ou nada mudar uma propriedade CSS aplicada a um elemento tão diretamente utilizando um !important por isso esta margin-right que te forneci sempre irá funcionar, porém pode estar acontecendo de em alguns casos o plugin estar utilizando margin-left, você tem como me mostrar melhor qual problema estás passando? Commented 4/02/2014 às 10:34
  • Style da LI em 1280 float: left; list-style: none; position: relative; width: 668.5px; margin-right: 14px; em 1440 float: left; list-style: none; position: relative; width: 666.5px; margin-right: 14px; No caso alguma coisa do plugin está alterando o tamanho de cada slide, dependendo do tamanho da tela pode chegar a 500px, acho que muda depois que atualiza a página Commented 4/02/2014 às 10:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .