Joomla.it Forum
Joomla! 3 => Joomla! 3 => : manuela77 28 Oct 2016, 23:23:24
-
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/ (http://www.falegnameriaceria.provahosting.it/)
Spero tanto tanto che qualcuno sappia darmi qualche suggerimento. Grazie anticipatamente!!!!!!!
Buona Notte
Manuela
-
Ciao,
ma... per prima cosa metterei un background-size:cover qui:
.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
.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.
-
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
-
Prova a mettere solo quello che ho indicato io come prima modifica.
.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%;}
-
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/
-
Ieri sera funzionava aggiungendo solo
background-size: cover !important;
dove ho scritto.
Non puoi ripristinare i css originali?
-
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;
}
-
No, se l'aggiungi così non va bene. la devi mettere dentro il css di
.art-slidecontainerpageslider .art-slide-item {
-
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;
}
-
Se vuoi dammi pass e user in PM che ci guardo.
Hai troppi display:none, che non servono e che pasticciano il css.
-
Prima rimetti tutto come era in origine.
-
Grazie mille!!!! Ti ho mandato un messaggio privato
-
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
-
Non ci posso credere!!!!!!!! Adesso è perfetto :D :D :D :D :D :D
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
-
Sei stato troppo gentile :)
Sono una femminuccia... :)
-
si scusami, l'avevo visto sul tuo profilo (poi la zampetta rosa!!!), è stato un errore di scrittura.
Buona serata!!!