Testo NON responsive in descrizione foto "Swiper Animated Slider" 
Autor: Giuseppe Guida
Visited 1939,
Followers 1,
Udostępniony 0
salve, il testo di descrizione sulle foto dell'Oggetto Swiper Animated Slider NON è responsive. Lìeffetto che se ne ottiene alle varie risoluzioni inferiori non è per nulla bello da vedere. il problema è stato già da me segnalato in un altro topic un po' ti tempo fa.
Spiegazione di quel che accade (il tutto è ricreabile da chiunque in pochissimi minuti):
predispongo un testo descrittivo di soli 28 pt per alcune foto inserite in Swiper Animated Slider e alle risoluzioni desktop la dimensione del testo è rapportata a tutto il resto: l'armonia grafica ed il colpo d'occhio sono quelli giusti (per il desktop!)...
Posted on the
Autor
... Ma alle risoluzioni inferiori succede che le foto si rimpiccioliscono e si adattano allo schermo ma i testi descrittivi sulle foto continuano a rimanere di 28pt e NON si adattano, fino a coprire totalmente le foto:
Autor
P.S. Si sovrappongono anche le frecce di navigazione al testo di descrizione delle foto e al suo background semi trasparente.
Con del codice ho risolto il problema ma non mi sembra giusto aver comprato un oggetto, averlo pagato, per poi utilizzarlo a metà o con del codice "toppa" per un testo che nel 2018 dovrebbe essere normalmente responsive dato che oramai il responsive è uno standard del web moderno da alcuni anni. Grazie
Ciao Giuseppe, potresti gentilmente passarmi il codice per i testi? Avevo risolto la magagna escludendo la visualizzazione della galleria alle risoluzioni inferiori, però non è che sia tanto soddisfatta della cosa. :-/
Autor
Luciana vai su questa bozza di sito, fai CTRL+U e puoi vedere il codice dal rigo 79 al rigo 95 (è anche commentato quindi non puoi sbagliare). Occhio a sostituire il giusto ID riferito al tuo oggetto in #swiper_pluginAppObj_110 (il numero in neretto va sostituito con quello effettivo riferito al tuo progetto). Ciao ciao
Autor
LINK BOZZA:
http://www.bozzasito001.altervista.org/snig01/
ciao ciao
Grazie Giuseppe, gentilissimo!
ma non basta questo per fare tutto?
<style>
#imPageRowContent_1,
#imPageRow_1 div[id^="imCell"] {
padding: 0;
width: 100% !important;
height: auto!important;
}
</style>
Autor
Comunque sto testando un'alternativa di slide full width per Website con animazione sui testi, il tutto creato SOLO ed ESCLUSIVAMEMTE con del codice extra, senza utilizzare nessun Oggetto, nè gratis, nè a pagamento, di Website. E sui testi puoi creare tutte le animazioni che più preferisci e personalizzare il tipo di font, il colore dei font, il colore e la semi trasparenza del background dei testi, il tipo di animazione sulle foto e tutto quello che vuoi senza essere soggetto ai limiti degli Oggetti di Website o ai limiti imposti dal corpo pagina di Website. Qui un video che mostra la slide full width in azione in Website, devo solo scrivere il codice relativo alle frecce di navigazione delle foto che nel mio esempio non ci sono ancora:
LINK VIDEO SLIDE FULL WIDTH SOLO CODICE: https://www.youtube.com/watch?v=Aj1VdpAAgSU
Autor
No Mirko, con quel codice non adatta i testi.
ok...so che le frecce le adatta con il mio codice, con testo non ho mai provato...
Autor
guarda qui con il codice indicato da te... Come vedi la foto è quasi totalmente coperta dal testo e dal suo background semi trasparente e non adatta neanche le frecce...
Autor
ci sono stringhe di codice in più s esi vogliono adatatre le frecce (quindi diminuirle di dimensioni e/o spostarle più sopra o più sotto) o spostare la posizione dei bullets di navigazione (che spesso si sovrappongono anche ai testi). Ho utilizzato tale codice in altri esempi ma non nella bozza del sito indicata sopra a Luciana.
Autor
ops *se si vogliono adattare le frecce... ecc
ma le frecce io le vedo adattate giuste...
Ok capito...
Autor
qui: http://www.bozzasito001.altervista.org/gfeventi05 ho utlizzato il codice per diminuire anche le dimensioni delle frecce alle risoluzioni smartphone
Insomma, come si può ben capire, l'Oggetto in questione (ma anche tutti gli altri Oggetti a pagamento) andrebbero un attimo rivisti per renderli moderni e responsive senza stare ogni volta a metterci codice "toppa" per sistemare cose che ormai fanno parte della normalità del web da qualche annetto.
Gazie ancora per tutte le spiegazioni e complimenti per lo slide con i testi animati!
Autor
Luciana, se NONvuoi usare tutte quelle media queries per l'adattamento del testo puoi provare ad inserire, al posto di tutte le media queries visibili nel codice relativo alla bozza di cui sopra, questa stringa di codice sempre facendo attenzione ad individuare il giusto ID (numero in grassetto) del tuo Oggetto:
#swiper_pluginAppObj_110 .swiper-slide .slide-description {
font-size: 4.5vw;
padding-top: 0.1%;
padding-right: 1.5%;
padding-bottom: 0.1%;
padding-left: 1.5%;
}
Il codice funziona alla perfezione (senza usare le media queries!!) per far adattare il testo in automatico a tutte le risoluzioni (utilizza l'unità "vw" al posto dei "pt"), vedi esempio al link sotto. L'unica cosa che non so di preciso è se è la vw unit è attualmente supportata da tutti i browser e, nel caso di browser più vecchi, capire cosa scrivere per far interpretare il comando anche ad essi:
http://www.bozzasito001.altervista.org/testoresponsive01
Autor
Grazie per i complimenti Luciana. Nel video il movimento dei testi non è molto fluido, sul sito reale si vede molto meglio (il video sembra un po' rallentato). Ciao
Non ti preoccupare del video, tanto io ho una connessione che per vederlo tutto impiego 20 minuti...
Grazie ancora, questa sera provo anche il secondo codice.
Complimenti Giuseppe, ma ho un dubbio: che grandezza di font ussi all'interno della galleria? Grazie!
me ne sono accorto adesso che la grandezza del font alla galleria viene disabilitato..
Autor
SitiWebApp, la grandezza nelle impostazioni di Swiper Animated Slider puoi metterla anche a zero o a quello che vuoi, in realtà la grandezza iniziale (visualizzazione desktop) viene assegnata al Font da questa comando:
font-size: 4.5vw;
esattamente dal valore 4.5 (espresso in vw unit e non in pt) che trovi all'interno del codice postato sopra o codice che puoi estrapolare dal link di esempio postato prima. Poi se la vede quel comando a diminuire in automatico la grandezza del font alle risoluzioni più basse. Tu non devi fare più nulla.
Ciao
Autor
qui si può vedere tutto il codice e l'effetto del testo di descrizione delle foto di Swiper Animated Slider che si riduce in automatico alle varie risoluzioni:
http://www.bozzasito001.altervista.org/proveautoplay/
Ciao ciao
Grazie di tutto Giuseppe, già avevo provato in locale ed é un ottimo risolto.
ottimo risultato.
Buongiorno Giuseppe,
come ti ho scritto anche nell'altro topic. Capisco il disagio da dover inserire codice personalizati. Purtroppo la gestione del testo in responsive non è presente per questo oggetto.
Ti confermo che la cosa è stata segnalata la nostro team di sviluppo per poter migliore l'oggetto.
Autor
Riccardo, io ho risolto in modo perfetto inserendo come unità di misura del testo il valore vw invece di pt, ho fatto solo quel cambio e tutto funziona alla perfezione, anche sui dispositivi mobili, non so soltanto quale e quanta sia la compatibilità con i vecchi browser ma sui moderni funziona perfettamente, guarda tu stesso come il testo si adatta a tutte le risoluzioni con questa semplice stringa dopo aver individuato l'ID dell'Oggetto:
#swiper_pluginAppObj_110 .swiper-slide .slide-description {
font-size: 4.5vw;
}
qui l'esempio:
http://www.bozzasito001.altervista.org/proveautoplay/
Il topic l'ho reso privato, ora la mia domanda è questa:
io sono un semplice amatore (faccio tutt'altro nella mia vita) e sono riuscito da solo a rendere responsive il testo che vedi sulle foto della Swiper Animated Slider resa full width in alto nella pagina... Non ho MAI fatto corsi di HTML, CSS e cose del genere, sono un autodidatta. Possibile che lì ad Incomedia non riescano?? Perchè mai? Che cosa li blocca? Questo per me è davvero inspiegabile...