[RISOLTO] Come ottenere slider responsive

[manuela77]

Ciao a tutti!
Sto cercando di realizzare un template responsive e tra i vari problemi che sto incontrando è la gestione della slider, in quanto non so come fare in modo che le immagini vengano ridimensionate per la visualizzazione da tablet e phone.
Guardando sul ccs responsive del template sono riuscita ad individuare la riga in cui è possibile impostare altezza e larghezza delle slide per il mobile ( e questo per me è già un buon risultato!!!!), così ho aumentato l'altezza ( che prima era settata a 100 ), ma l'immagine viene ritagliata mostrando solo la parte centrale, mentre vorrei riuscire a fare in modo che si ridimensioni.
Questo è il codice relativo ad altezza e larghezza per le slide nella modalità responsive:

.responsive .art-pageslider
{
   width: auto !important;
   max-width: none !important;
   min-height: 400px !important;
   min-width: 0 !important;
   text-align: center;
}

.default-responsive .art-pageslider
{
   height: auto;
}

.default-responsive .art-pageslider .art-slide-item > *
{
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -o-transform: none !important;
   -ms-transform: none !important;
   transform: none !important;
}

.default-responsive .art-pageslider .art-slide-item > .art-textblock
{
   display: none !important;
}

E questo è il link al sito :  http://www.falegnameriaceria.provahosting.it/

Spero tanto tanto che qualcuno sappia darmi qualche suggerimento.  Grazie anticipatamente!!!!!!!

Buona Notte
Manuela

[adottauncane]

Ciao,
ma... per prima cosa metterei un background-size:cover qui:

Codice: [Seleziona]

.art-slidecontainerpageslider .art-slide-item {    background-size: cover !important;    display: none;    height: 100%;    left: 0;    opacity: 0;    position: absolute !important;    top: 0;    transition: opacity 1000ms ease-in-out 0s;    width: 100%;}
e poi non mi convince troppo questo min-height

Codice: [Seleziona]

.responsive .art-pageslider
{
   width: auto !important;
   max-width: none !important;
   min-height: 400px !important;
   min-width: 0 !important;
   text-align: center;
}
forse conviene usare i @media anche per questa altezza.

[manuela77]

Ciao Adottauncane (ps. bellissimo il tuo nick  ), innanzitutto grazie per avermi dedicato il tuo tempo. Ho letto un po' sui mediaquery e ho provato a modificare il css nel modo che riporto sotto (ho inserito il tuo paragrafo e altri due che ho trovato su internet  per la gestione delle slider in modalità tablet e phone), ma .....così non si vedono più le slider ... al loro posto compare uno spazio bianco....
.art-slidecontainerpageslider .art-slide-item
{   
  background-size: cover !important;   
  display: none;   
  height: 100%;   
  left: 0;   
  opacity: 0;   
  position: absolute !important;   
  top: 0;   
  transition: opacity 1000ms ease-in-out 0s;   
  width: 100%;
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
   .inner {
      width:301px;
   }
 
   ul#nav li {
      padding:4px 0;
      width:100%;
   }
 
   #slider {
      height:99px;
      width:301px;
   }
 
   #main .box {
      margin-bottom:10px;
   }
 
   img.aboutus {
      margin-bottom:10px;
   }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
   .inner {
      width:461px;
   }
 
   ul#nav li {
      width:25%;
   }
 
   #main .box {
      margin-bottom:10px;
   }
 
   img.aboutus {
      float:left;
      margin-right:20px;
   }
.art-slidecontainerpageslider .art-slide-item
{   
  background-size: cover !important;   
  display: none;   
  height: 100%;   
  left: 0;   
  opacity: 0;   
  position: absolute !important;   
  top: 0;   
  transition: opacity 1000ms ease-in-out 0s;   
  width: 100%;
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
   .inner {
      width:301px;
   }
 
   ul#nav li {
      padding:4px 0;
      width:100%;
   }
 
   #slider {
      height:99px;
      width:301px;
   }
 
   #main .box {
      margin-bottom:10px;
   }
 
   img.aboutus {
      margin-bottom:10px;
   }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
   .inner {
      width:461px;
   }
 
   ul#nav li {
      width:25%;
   }
 
   #main .box {
      margin-bottom:10px;
   }
 
   img.aboutus {
      float:left;
      margin-right:20px;
   }

     [size=0pt]   #slider {[/size]     [size=0pt]      height:152px;[/size]        [size=0pt]      width:461px;[/size]     [size=0pt]   }[/size]        [size=0pt]}[/size]   
                        
Spero che tu o qualche altro utente sappia darmi qualche indicazione...
Grazie per la disponibilità.
Buon sabato!!!!!
Manuela

[adottauncane]

Prova a mettere solo quello che ho indicato io come prima modifica.

Codice: [Seleziona]

.art-slidecontainerpageslider .art-slide-item {
background-size: cover !important;
display: none;
height: 100%;
left: 0;
opacity: 0;
position: absolute !important;
top: 0;
transition: opacity 1000ms ease-in-out 0s;
width: 100%;}

[manuela77]

Ho messo solo quello che mi hai scritto tu, e ho provato sia a lasciare il paragrafo riportato sotto sia a toglierlo ma non cambia niente.... non compaiono le slider ma solo uno spazio bianco   

  .responsive .art-pageslider
{
   width: auto !important;
   max-width: none !important;
   min-height: 400px !important;
   min-width: 0 !important;
   text-align: center;
}
 
.default-responsive .art-pageslider
{
   height: auto;
}
 


il link al sito è : http://www.falegnameriaceria.provahosting.it/

[adottauncane]

Ieri sera funzionava aggiungendo solo

Codice: [Seleziona]

background-size: cover !important;
dove ho scritto.
Non puoi ripristinare i css originali?

[manuela77]

Davvero funzionava?
Ho riprisitnato i css originali e aggiunto solo la riga, prima del paragrafo dove c'è l'altezza minima, ma niente da fare...sempre quel maledetto spazio bianco 

background-size: cover !important;

.responsive .art-pageslider
{
   width: auto !important;
   max-width: none !important;
   min-height: 400px !important;
   min-width: 0 !important;
   text-align: center;
}

.default-responsive .art-pageslider
{
   height: auto;
}

.default-responsive .art-pageslider .art-slide-item > *
{
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -o-transform: none !important;
   -ms-transform: none !important;
   transform: none !important;
}

[adottauncane]

No, se l'aggiungi così non va bene. la devi mettere dentro il css di

Codice: [Seleziona]

.art-slidecontainerpageslider .art-slide-item {


[manuela77]

Ho provato ad inserire la riga background-size: cover !important; , prima all'interno del primo paragrafo riportato sotto e poi all'interno del secondo paragrafo e anche in tutti e due i paragrafi...sono ricomparse le slides ma non sono ridimensionate...sigh...sono proprio un disastro...non capisco dove sbaglio visto che tu sei riuscita a farlo funzionare....



.responsive .art-pageslider
{
  background-size: cover !important;
   width: auto !important;
   max-width: none !important;
   min-height: 400px !important;
   min-width: 0 !important;
   text-align: center;
}

.default-responsive .art-pageslider
{
   height: auto;
}

.default-responsive .art-pageslider .art-slide-item > *
{
  background-size: cover !important;
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -o-transform: none !important;
   -ms-transform: none !important;
   transform: none !important;
}

[adottauncane]

Se vuoi dammi pass e user in PM che ci guardo.
Hai troppi display:none, che non servono e che pasticciano il css.

[adottauncane]

Prima rimetti tutto come era in origine.

[manuela77]

Grazie mille!!!! Ti ho mandato un messaggio privato

[adottauncane]

Adesso dovrebbe essere a posto.
Forse c'è da ritocare qualche @media, vedi tu.
Ma perché ti fai tu il template e la slide? Per studio? Perché ci sono ottime slide e template molto simili già pronti, sola da ritoccare come colori, eventualmente come ad esempio Helix3 che è molto simile a quello da te fatto.
Tipo:
http://www.caterinavivarelli.it/
con questa slide:
https://extensions.joomla.org/extension/dj-imageslider

[manuela77]

Non ci posso credere!!!!!!!! Adesso è perfetto 
Non so come ringraziarti davvero!
Ho fatto io il template soltanto perchè dopo averne provati un tot, non sono mai riuscita a trovarne uno che mi andasse bene e a modifcare quello che non mi piaceva. Ti ringrazio per il suggerimento, provo a guardare Helix3 che non avevo mai sentito!!!
Se c'è qualcosa che posso fare per sdebitarmi, fammi sapere.
Sei stato troppo gentile 

Manuela

[adottauncane]

Sei stato troppo gentile 

Sono una femminuccia...

[manuela77]

si scusami, l'avevo visto sul tuo profilo (poi la zampetta rosa!!!), è stato un errore di scrittura.
Buona serata!!!