Adatta Grandezza Font alla larghezza dell'oggetto 
Autor: Marco L.
Visited 589,
Followers 2,
Udostępniony 0
Buonasera,
per quale motivo immagini e testo non si adattano in automatico dalla versione Desktop alle vario versioni RESPONSIVE?
Ho immagini usate con l'oggetto elenco immagini nello stile righe e oggetti testi nell'header e nel footer.
Altre volte lo stesso oggetto nello stesso ambiente uno funziona e l'altro no
es.1 sono due oggetto titoli con le stesse impostazioni
questo invece è l'oggetto elenco immagini impostato nel stile righe in versione responsive non adattato
Posted on the
Ciao Marco, forse un link del sito se online sarebe utile per una eventuale valutazione.
Autor
Ciao è in fase embrionale di sviluppo al momento non è nulla online purtroppo
ciao, ... non hai postato questa immagine, comunque senza il link di un esempio reale online, un click per esportare al Passo_5, non si posso fare valutazioni, pertanto appena puoi provaci, anche per imparare e rendersi conto dell'insieme evitando eventuali sorprese tardive...
... le immagini usate nello sfondo delle righe a rigor di logica dovrebbero essere congrue tra loro, e rispondono alla regola CSS COVER rispetto alla Altezza della riga (fissa o in base ai contenuti) ed alla Larghezza della finestra, per cui basta usare immagini adatte per tale scolpo, nel dubbio meglio immagini in rapporto (1:1) o (4:3), ma certo dipende dal contesto...
... forse questi esempi ti potrebbero essere di aiuto a capire, la sezione in giallo dell'immagine ritagliata rappresenta la luce della riga, altezza della riga e larghezza della finestra...
... se si vuole che le immagini di sfondo della riga prendano l'aspetto razionale proprio (se congrue), basta usare il metodo de "L'uovo di Colombo", (dai tempi della veterana v.12)!!!..
... ... ...
... invece, ... per i testi in Header, questi si devono regolare breackpoint per preackpoint, come si fa normalmente per tutti gli oggetti di Header e StickyBar, ...oppure, se proprio lo si vuole, si può usare semplicemente il testo in oggetto codice html in elementari tag <span> o <p> o <a> o quello che sia, con applicato l'attributo di elasticità...
.
ciao
.
Autor
a voi un paio di esempi di mancato responsive sull'oggetto "testo" in primo piano su uno stile righe contentente oggetto "elenco immagine".
Qui oltre a non adattare l'oggetto "elenco immagine" le immagini sono tutte 16:9 o 4:3 non adatta neanche l'oggetto "testo" dove sbaglio non è possibile che WebsiteX5 non riesca a fare questa semplice funzione.
Grazie
Sinceramente guardando l'immagine non si può risalire al problema, potrebbe essere testo copiato sull'oggetto con tabulazione precedente o altro, finché non è visibile online non si riesce
Buongiorno Marco,
potresti cortesemente aggiungere degli screenshot delle impostazioni della pagina, dell'oggetto Testo e dello Stile Riga così che sia più facile analizzare la situazione?
Grazie.
... senza un esempio online che ti ho conisgilato prima o degli STAMP proposti da Eric, ...non capisco bene che cosa vuoi ottenere e dove...
... l'oggetto testo è proprio per il testo, nè più nè meno del testo dei Post di questo Forum...
... se tu adesso ridimensioni la finestra del browser noterai che il testo del Forum si adatterà andando a capo o meno, esattamente come avviene per l'oggetto testo del programma...
... quindi se il testo è in una riga con sfondo animato, lo sfondo prenderà l'altezza del contenuto del testo; ...per il resto dovrebbero essere chiaro l'aspetto che prende lo sfondo sulla base di quanto ho detto prima...
... ... ...
... se invece tu vuoi usare un testo come titolo o qualcosa di simile, e farlo adattare alle misure della cella ospite, allora puoi usare l'oggetto Titolo [A], assegnando la prevista opzione di adattamento del font alla larghezza dell'oggetto...
.
Buongiorno, da anni uso il codice extra per ridimensionare i caratteri a livello responsive. Website non lo fa in automatico o meglio lo fa solo con l'oggetto "titolo".
Autor
Ciao di quale codice extra parli?
Appena sarà semi pronto posterò il link del sito
Grazie
... riguardo a questo:
... vedi qui: https://www.w3schools.com/howto/howto_css_responsive_text.asp
.
.
Autor
Buongiorno,
allego link di una prima bozza del sito.
Grazie a chi vuole aiutarmi a risolvere.
http://www.onoranzefunebridantoni.com/index.html
Autor
Se qualcuno riesce ad aiutarmi anche nel gestire il responsive nell'Header e il footer. Grazie
... per i testi hai usato il normale oggetto testo, pertanto si comporta come tale, come ti avevo già detto prima...(*)...
... e sempre come ti avevo già detto, se ti interessa un ridimensionamento con adattamento del testo, vedi quanto detto prima per oggetto Titolo [A], almeno puoi fare una prova per verificare...
... per header, niente da dire, mi pare regolare...
... per footer devi vedere un po' tu nella sistemazione ad hoc degli oggetti nella varie risoluzioni; ...per quel quel che si vede adesso sotto ai 720px mi pare un po' sballato...
(*) - lasciando le cose come stanno attualmente in rete, se interessa per i testi, si conosce il programma, e se si vuole provare in EXTRA, per alcuni testi si può ridimensionare con semplice codice CSS EXTRA nei pannelli Esperto, nei modi che ho suggerito in anni passati...
.
Autor
Grazie per la celere risposta, ma ti chiedo veramente scusa per l'ignoranza, ma non ho capito nulla di quello che mi indichi
Autor
Mi stai dicendo che l'oggetto "testo" non si ridimensione a livello di grandezza carattere ma soltando ti testo a capo?
Mentre l'oggetto "titolo" si ridimensiona?
Se fosse così è chiarissimo che sono due oggetti con sostanziali differenze, per scrivere un testo lungo di diverse righe come il mio caso l'oggetto "titolo" è molto scomodo e comporta un oggetto per ogni riga della grigli di website.
esatto, dovresti usare del codice per l'oggetto testo purtroppo.
Vedi se tu è utile questo semplice tutorial al seguente link
... esatto, il testo per il testo propriamente detto, ed il titolo per altre occasioni...
... devi imparare con calma e con pazienti prove a gestire oggetti ed opzioni del programma ad hoc...
... in nessun sito il testo viene ridimensionato, e il tipo di lettura normale rimane costante anche nei dispositivi mobile perchè l'occhio che legge è sempre lo stesso; ... chi vuole può zoommare il browser...
... là dove serve per esigenza grafiche dipende da te la scelta da fare sul tipo di oggetto da usare, per esempio in certe occasioni potresti usare anche il testo in formato grafico, per esempio in PNG trasparente...
... anche se ancora sei inesperto, se vuoi forzare certe situazioni, l'uso del codice EXTRA è minale se sei disposto al "fare", ad imparare e ad usarlo, visto che il programma lo permette per chi ha quel quid+ ed è creativo...
... più fai esperienza più ti si semplificheranno le cose facendo tutto da te semplicemente cliccando...
... in caso di bisogno puoi sempre fare una domanda qui in Topic a tema dedicati...
.
ciao
.
... dimenticavo, c'è sempre una prima volta...
... se te la senti, e se vuoi provare la "magia" di Websitex5, ...avvisami...
.
Autor
Grazie mille appena posso proverò a utilizzare questo codice extra, sempre gentilissimo
Autor
Scusa cosa vuoi dirmi con queste immagini?
.
Il solito codice extra per rimediare.
Quando leggo: "in nessun sito il testo viene ridimensionato...", immagino ci si riferisca ai siti realizzati esclusivamente con Website X5.
In questo video appena realizzato da me, si evince il contrario per quanto riguarda sia Titoli che Testo su altre Piattaforme/Software per realizzare siti web:
https://youtu.be/XNq93Y98Osk?si=sSW1ADQQ6to4OaC3
P.S. potrebbe essere uno spunto per Incomedia e il suo Website X5, chissà...
P.P.S. si possono inserire molti altri Breakpoint e si può lavorare anche sull'interlinea ad ogni Breakpoint oltre che sulle dimensioni del testo.
È curioso notare come persino “qualcuno” si sia spinto a osannare Incomedia, quando basta aprire il software per rendersi conto che la realtà è ben diversa. Il testo si adatta solo sotto i 36px, oltre quella soglia l’automatico è inesistente: parole lunghe si spezzano e il ridimensionamento diventa un incubo.
L’oggetto testo con “A” ridimensiona bene, ma non può essere usato sopra altri oggetti: un limite che grida incoerenza. Di “responsive” vero non c’è nulla: l’unico elemento sempre leggibile è il marchio INCOMEDIA. Tutto il resto è un festival di immagini deformate e adattamenti da fantascienza ingegneristica.
Personalmente non ho problemi, perché lavoro con programmazione seria, non con rattoppi da “invenzioni dell’ultimo secondo” o “magie strane” spacciate per soluzioni improvvisate. Ed è qui che il marketing diventa quasi offensivo: si parla di versioni PRO e addirittura Agency, quando la base del prodotto non regge nemmeno un confronto con strumenti basilari di web design. Vendere queste edizioni come soluzioni professionali è un’illusione che non fa altro che minare la credibilità del marchio.
Prima di osannare, sarebbe meglio guardare con onestà: chi lavora seriamente con questo software sa che deve continuamente coprire falle strutturali.
Quanto al sito citato come esempio, per me di quel “responsive totale” non c’è traccia né nei testi né nelle immagini e l'autore ha tutte le ragioni per incavolarsi.
Autor
Grazie per il tuo intervento, mi accorgo sempre più che alla fine questo websitex5 è solo un altro di quei prodotti che promette tante cose belle ma alla fine promette solo tante cose...
… guarda, dipende tutto da te: non c’è niente di complicato, incomprensibile o “trascendentale”. ...però, dopo quasi quindici anni, mi sorprende che tu dia ancora così peso a queste conclusioni...
... tanto, piccoli pseudo-problemi spuntano sempre e dappertutto…
… con un po’ di savoir-faire, impegno e voglia puoi arrivare dove vuoi; e se hai seguito il forum sei già a buon punto…
… comunque, se ti servono chiarimenti su quello che ti avevo accennato o altri consigli pratici, mirati e sul concreto, fammi sapere e torno qui, ...altrimenti, regolati tu…
... ciao, e buon lavoro!
.
Esattamente. E chi sostiene il contrario, spesso lo fa per mestiere.
Dopo tanti anni, forse è proprio il peso accumulato di certe dinamiche che merita attenzione — non il contrario. Il fatto che “spunti sempre qualcosa” non è una scusa: è un sintomo. E quando i sintomi si ripetono, non è l’utente a dover cambiare approccio, ma il prodotto a dover rispondere.
Dire a un utente che “dopo quasi quindici anni sorprende che si dia ancora peso a certe conclusioni” significa minimizzare la sua esperienza e ridurre problemi reali a “pseudo-problemi”. È un modo di spostare la responsabilità sull’utente, invece di riconoscere che se gli stessi difetti si ripetono da anni, non sono dettagli trascurabili ma limiti strutturali del prodotto.
Certe risposte, per quanto eleganti, semplificano troppo ciò che richiederebbe un confronto tecnico, onesto e meno retorico.
Pienamente d'accordo con l'ultimo messaggio di Roberto M.
Qui si va avanti da decenni con trucchetti, invenzioni e stron***e varie alla Harry Potter e da Potter a MagicSite il passo é breve. Poi la vera magia della sparizione la vedi applicata a dovere qui, Harry Potter ha fatto scuola:
https://helpcenter.websitex5.com/pl/post/274208
Autor
Ciao Giancarlo, ho effettuato la correzione con il tuo codice, avrò fatto qualche errore ma non vedo miglioramenti.
Puoi verificare cortesemente?
Grazie
hai messo il mio ID dell'esempio ma il tuo è questo: #imTextObject_46_tab0
Marco, questo dovrebbero essere le 3 linee di testo sulola tua pagina, in grassetto metti tu la dimensione corretta:
<style>
@media (max-width: 720px) {
#imTextObject_46_tab0 .ff1 {font-size: 40px!important;}
#imTextObject_46_tab0 .fs80lh1-15 {font-size: 40px!important;}
#imTextObject_46_tab0 .fs60lh1-5 {font-size: 40px!important;}
}
</style>
Autor
perfetto funziona, certo applicare questi codici a tutti i testi presenti all'interno di possibili pagine internet è un impresa, si va a bruciare tutto il tempo che si risparmia utilizzando software tipo WEBSITE.
Funziona anche sulle immagini di sfondo presenti tra le righe?
Grazie mille
purtroppo la normalità delle cose sarebbero se website le facesse di default, sono anni che si chiedono, comunque il mio tutorial con tanto di video dovrebbe essere esaustivo.
Questo per quanto riguarda i testi. per le immagini no.
... prima di uscire da qui, ...per curiosità sono andato a rivedere il tuo sito, ...e ai 1000px presi per riferimento il risultato è lontano dal mio primo STAMP e dal secondo che avrebbe dovuto chiarire, e che non è servito...
... riguardo a questa tua ultima domanda, le immagini della riga si adattano in modalità css COVER alle dimensioni degli oggetti ivi lì contenuti...
... nel caso, e se, ci rivedremo altrove...
.
Autor
Grazie alla community per avermi aiutato a risolvere il problema, non capisco come possa website perdersi in queste cose.
Come posso adattare le immagini in sequenza di sfondo riga?
Grazie
Marco......Ma perchè ti vuoi complicare la vita quando con un content slider e poche righe di codice ottieni un comportamento adattivo prossimo al responsive? ESEMPIO
Se proprio devi rimanere su sfondo riga e immagini in sequenza prova a vedere queste 2 combinazioni:
La prima è stata concessa agli smanettoni da Giuseppe Guida . Nessun codice da inserire ma solo regole da seguire: ESEMPIO
La seconda è sempre su immagini in sequenza su sfondo rigà ma con codice elaborato dalla Banda degli smanettoni ESEMPIO
per me la cosa migliore da prendere in considerazione è il content slider.
Autor
Contento slider non si possono mettere scritte testo o titoli con effetti sopra giusto?
Il content slider dispone di effetti sia per le immagini sia per i contenuti. Per valutarli, ti basta provarlo e verificare se rispondono a ciò che stai cercando.
Ma li vedi gli esempi che ti ho postato? Questo è un content slider. Ha una decina di effetti sia sulle transizioni che nei testi. Originariamente non è un oggeto responsive da 4 anni ma la gente è sempre contenta col cuoricino. ESEMPIO
Serve un po di codice extra ma no problem se segui questa strada.
Autor
Come faccio ad ottenere un risultato del genere?
Dipende se vuoi o meno perderci tempo. Di contro acquisti il template dallo sviluppatore e lo modifichi come ti pare mi pare ovvio. A quel punto devi solo cambiare le imagini e i testi ma vedo che è un monopagina con ancoraggi selezionati quindi devi regolarti in base alle tue effettive esigenze riguardo alle pagine che vuoi. SE ne vuoi di più non è adatto per te e devi proseguire la strada inserendo codice extra nel tuo template.
Tu intanto fai una pagina con un content slider,tre foto da 1920x1280, tre titoli e tre Slogan (uno per ogni titolo) e poi vediamo se con un po di codice ti posso accontentare. Collega con un pulsante CONTATTACI che male non fa. LO puoi attivare nelle impostazioni del content slider stesso.
Autor
fatto
Fatto dove. Dove hai messo l'oggetto contentslider?. Sulla index non lo vedo ma vedo una sequenza immagini su riga.
In ogni caso ecco►►► IL TUO ESEMPIO DI COME VERREBBE
Tra due ore questa pagina sarà eliminata.
Autor
Scusa non lo avevo caricato, stavo smanettando a fare questo, ma non riesco a capire dove inserire lo script della seconda parte oggetto html
https://www.losmanettone.it/oggettoimmagine2.html
inserito in content di prova qui
https://www.onoranzefunebridantoni.com/pagina-10.html
Niente ti devi per forza complicare la vita
Lo script lo devi inserire in un oggetto HTML e lo metti sotto all'oggetto immagine. C'è riportato anche nella guida.
Autor
era per smanettare ma attendo te per capire come fare con il content
Grazie
Autor
ok ma i font sono modificabili giusto? puoi passarmi il codice utilizzato?
Grazie
il tuo content slider ha questo id imObjectContentSlider_23_01 (cambierà se sposti il content slider in altra pagina)
Settalo a 700px come altezza nelle impostazioni. TITOLI INIZIA CON 48PX e SLOGAN DA 16 O 14px
Mettici altre due immagini,due titoli e due slogan
il codice è questo da inserire nella proprietà della pagina DELLA PAGINA CHE MI HAI DATO prima della chiusura del tag HEAD:
<style>
/* Custom code by Giuseppe Guida */
/* Base query superiore by Max */
.content-slider.slide-image-content {
width: 200px !important;
}
#imObjectContentSlider_23_01 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
width: 70px;
height: 70px;
}
.content-slider.content-slider-ctrl-container {
visibility: visible !important;
}
#imObjectContentSlider_23_01 > .content-slider-container > .slide-container > .slide-grid-container
> .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
background-color: rgba(135, 178, 193, 0.86);
}
/* Media queries */
/* Large tablets / small desktops */
@media (max-width: 1149.9px) and (min-width: 200px) {
#imObjectContentSlider_23_01 {
min-height: 650px !important;
}
#imObjectContentSlider_23_01 .slide-title {
font-size: 22pt !important;
}
#imObjectContentSlider_23_01 .slide-button {
font-size: 12pt;
}
#imObjectContentSlider_23_01 .arrow-btn {
width: 40px;
height: 40px;
}
}
/* Tablets */
@media (max-width: 759.9px) and (min-width: 200px) {
#imObjectContentSlider_23_01 {
min-height: 500px !important;
}
#imObjectContentSlider_23_01 .slide-title {
font-size: 22pt !important;
}
#imObjectContentSlider_23_01 .slide-button {
font-size: 12pt;
}
#imObjectContentSlider_23_01 .arrow-btn {
width: 40px;
height: 40px;
}
}
/* Smartphones */
@media (max-width: 719.9px) and (min-width: 200px) {
#imObjectContentSlider_23_01 {
min-height: 400px !important;
}
#imObjectContentSlider_23_01 .slide-title {
font-size: 22pt !important;
}
#imObjectContentSlider_23_01 .slide-button {
font-size: 12pt;
}
#imObjectContentSlider_23_01 .arrow-btn {
width: 40px;
height: 40px;
}
}
/* End custom code */
</style>
Possiamo renderlo ancora più intrigante con aggiunta di codice del nostro amico GIANCARLOWEB ma al momento prova questo.
Il codice dei font del content slider sono RALEWAY mentre sul mio demo in parte ho utilizato Italianno.
Autor
si scusa ho capito dopo, il problema è la modifica del carattere e dimensioni font, pulsante etc altrimenti sarebbe perfetto
tutto è modificabile con il codice.
La pappa pronta gli smanettoni la danno ma poi quello che fa la differenza e sapere mettere le mani sul codice comunque ....con le tecnologie che ci sono o non sapendo dove mettere le mani ti do una dritta: copia il codice che hai messo sulla tua pagina, mettilo su chatGPT e gli dici: Carissima vorrei cambiare colore dal bianco al ROSSO .Ti do tt il codice mi dici dove devo intervenire o meglio? MI ricomplili il codice modificato con il colore che desidero?
Fatto!
Autor
azz...
Autor
caricata pagina modificata...non credo che sia male, che dici?
Se ti riferisci alla pagina 10test devi controllare la larghezza dei font. Per il resto avrei preferito il Raleway al posto di quello attuale. Puoi vedere il tuo test su una bella pagina di simulazione realizzata dal GiancarloWeb
SIMULAZIONESITOWEB