Sito Responsive - problemi con cellulare 
Author: Fernando N.Ciao a tutti, ho un problema con la parte responsive del sito.
In pratica ho creato questa pagina:
http://www.accerta.it/nuovaversione/uni-en-iso-9001-2015.html
Qui ho inserito, subito sotto il menu, una immagine di sfondo e un testo con effetto a comparsa dalla destra.
Su browser web tutto ok, una visualizzazione come volevo io e su questo sono molto contento del risultato.
Però i problemi sorgono quando si passa alla versione per cellulari (anche su tablet va bene).
Ovviamente da cellulare il testo risulta molto grande, quindi viene troncato dalla pagina e non si vede come dovrebbe. La mia domanda è....si può fare in modo che, in visualizzazione da cellulare, quel testo assuma una dimensione più piccola rendendolo visibile per intero?
Altrimenti dovrei togliere sia il testo che l'immagine dalla visualizzazione cellulari, e poi, togli questo, togli quello, resterebbero solo testi.
Grazie
se ho capito cosa intendi...
utilizza l'oggetto "titolo" che ti permette di attivare la riduzione automatica del carattere...
oppure se fosse un testo lungo prova cosi:
in oggetto html>>>codice html:
<p>Questo testo è stato scritto a caso. Questo testo è stato scritto a caso. Questo testo è stato scritto a caso. Questo testo è stato scritto a caso. Questo testo è stato scritto a caso... </p>
poi in esperto del codice html:
@media only screen and (min-width : 260px) and (max-width : 768px) {
p { font-size: 4.5vw; }
}
@media only screen and (min-width: 768px) and (max-width: 1224px) {
p { font-size: 2.5vw; }
}
Author
Ciao e grazie per la risposta, ho provato a fare come dici tu e da mobile ora mi risulta corretta la visualizzazione.
Il problema invece ora ce l'ho sul browser da PC, in pratica io avevo messo un'immagine di sfondo che mi copriva il 60% dello schermo, come puoi vedere qui (http://www.accerta.it/nuovaversione/politica-per-la-s.s.l..html) mentre ora usando titolo mi viene ridotto tanto e l'effetto non risulta più lo stesso (http://www.accerta.it/nuovaversione/politica-di-accerta.html).
C'è modo di ovviare, o devo passare alla soluzione di Mirko? (grazie anche a te per la risposta).
Author
Aggiornamento: dovevo muovere i margini della cella!!!
Ora penso di aver risolto.
L'unica differenza che noto, quando scorro in giù nella pagina, vedo un diverso effetto tra le due pagine.
Non credo sia un problema grandissimo nel caso non si possa risolvere, ma se possibile, gradirei avere lo stesso effetto che si vede nella prima pagina.
Author
Aggiornamento 2:
Dopo aver toccato i margini, mi si è "sballata" di nuovo la visualizzazione da cellulare.
Qualche consiglio???
Author
Ma questa soluzione andrebbe bene anche con un testo corto?
Ho provato a impostare il mio test con oggetto html, ma la grandezza dello stesso non sembra cambiare.
In oggetto html ho messo:
<p align="right"><font face="Sarawabi Gothic">La Politica di Accerta</font></p>
e in esperto codice ho incollato il testo che mi hai suggerito tu.
Anche cambiando i valori di font-size in esperto, o aggiungendo font-size nell'html, non noto alcuna differenza della grandezza del testo.
strano deve funzionare con il mio codice.....a me funziona....
metti il link della tua prova per vedere...
Author
Ciao Mirko, grazie per la risposta.
Allora ho messo il tuo codice come detto sopra nel CSS dell'oggetto HTML della pagina in questione:
http://www.accerta.it/uni-en-iso-9001-2015.html
In HTML ho scritto semplicemente:
<p align="right"><font face="Sarawabi Gothic" color=black size="55">UNI EN ISO 9001:2015</font></p>
<p align="right"><font face="Sarawabi Gothic" color=white size="40">Sistema di Gestione di Qualità</font></p>
e in ESPERTO ho messo
@media only screen and (min-width : 260px) and (max-width : 768px) {
p { font-size: 7vw; }
}
@media only screen and (min-width: 768px) and (max-width: 1224px) {
p { font-size: 5vw; }
}
Infine ho applicato un effetto di fade di 3 secondi dalla destra verso sinistra.
Ma la prima cosa strana è che non mi formatta la grandezza del testo....ho provato anche a rimuovere da HTML il size, o a modificare il font-size in esperto, ma niente da fare, resta sempre della stessa grandezza.
Author
Aggiornamento.
Ho fatto due ricerche in rete e ho capito che sono rimasto all'età della pietra.
Ho quindi sostituito il codice html di cui sopra
(<p align="right"><font face="Sarawabi Gothic" color=black size="55">UNI EN ISO 9001:2015</font></p>
<p align="right"><font face="Sarawabi Gothic" color=white size="40">Sistema di Gestione di Qualità</font></p>)
con il seguente:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: right;
}
</style>
</head>
<body>
<div class="a">
<span style="font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 55pt; color: #000000;">UNI EN ISO 9001:2015</span>
</div>
</body>
</html>
Ora andiamo meglio come formattazione del testo, anche se non ho il font che ho nelle altre pagine, magari studio ancora e ci riesco.
Il problema è che tra cellulare e pc non noto alcuna differenza nonostante il tuo testo nella CSS.
Altro problema, se scrivo due righe una sotto l'altra me le mette comunque sulla stessa riga.
Se inseriti in oggetto HTML questi tag <!DOCTYPE html><html><head></head><body></body></html> Non ci vanno messi.
I font sono differenti perchè come font-family hai Trebuchet MS, Helvetica, sans-serif e invece dovresti inserire Sarawabi Gothic che dovresti allegare anche al progetto perchè non è un font comune.
Oltretutto quello che inserisci tu è un DIV (contenitore) mentre lo script di Mirko Boschetti è un <p> (paragrafo) ed il richiamo nel css che ti ha dato Mirko fa riferimento al paragrafo e non al contenitore
E' da rivedere un pò tutta la cosa
Author
Grazie per la risposta.
Allora, ho cambiato il font per il momento, studierò poi come allegarlo al progetto poi, per ora uso Trebuchet.
Il mio codice ora è questo:
<style>
div.a {
text-align: right;
}
</style>
<div class="a">
<span style="font-family: Trebuchet MS, sans-serif; font-size: 55pt; color: #000000;">UNI EN ISO 9001:2015</span>
</div>
Quindi in pratica o si cambia questo codice, oppure quello del buon Mirko???
Cos'ì non ti funziona il codice CSS di Mitko per i motivi che ti ho scritto sopra.
Prova così:
OGGETTO HTML:
<div id="a">
<p>UNI EN ISO 9001:2015</p>
</div>
ESPERTO CSS:
#a {
font: 55px Trebuchet MS;
text-align: right;
color: #000000;
background-color: transparent;
}
@media only screen and (min-width : 260px) and (max-width : 768px) {
p { font-size: 4.5vw; }
}
@media only screen and (min-width: 768px) and (max-width: 1224px) {
p { font-size: 2.5vw; }
}
Non ho fatto prove ma dovrebbe funzionare
Author
Grazie Patrizia, adesso si che ci siamo vicini!
Se non fosse stato per te non ci sarei arrivato mai.
Scusa se ti tedio, vorrei sapere solo come fare ad incorporare al progetto il font che serve a me.
E un'altra cosa...ho notato che mettendo un font-size 4.5vw mi incolonna il testo su cell, così:
UNI
EN
ISO
9001:2015.
Non ho modo di vederlo su una sola riga, nemmeno abbassando a 1vw....forse c'è modo di formattarlo diversamente? Perchè l'unica cosa accettabile che ho è:
UNI EN ISO
9001:2015
con font-size: 2vw, ma poi davvero risulta troppo piccolo il testo.
Per inserire un font devi andare nella pagina dove hai un oggetto testo e cliccare sulla tendina dei caratteri e poi sul altri tipi di carattere, a questo pnto aggiungi il font preventivamente scaricato (meglio se google font).
Per il problema che ti si incolonnano è strano a me, in locale, funziona, prova a modificare così:
@media only screen and (min-width : 260px) and (max-width : 768px) {
p { font-size: 16px; }
}
@media only screen and (min-width: 768px) and (max-width: 1224px) {
p { font-size: 40px; }
}
Anche se è più corretto l'altro, unica cosa, nell'altro codice sono stati, erroneamente, invertiti i paramentri alle diverse grandezze del browser, prima di mettere questo codice nuovo prova con quello vecchio invertendo 4.5vw al posto di 2.5vw e viceversa, magari adattando le misure in base alle tue esigenze.
Author
Grazie per la risposta.
Per il testo, l'ho aggiunto e sembra andare bene.
Per l'altro problema invece sempre lo stesso. Ho provato sia con px che con vw ma me li incolonna sempre.
Se aumento i px va ancora peggio.
Se hai un cell per dare un'occhiata:
http://www.accerta.it/uni-en-iso-9001-2015.html
Author
Update: secondo me tutti i problemi che ho di visualizzazione derivano tutti dai breakpoint della pagina di selezioni delle risoluzioni responsive.
Elenco qui di seguito la tabella che mi ritrovo io riguardante i breakpoint:
1080px | Desktop | Maggiore uguale a 1080px
720px | Visualizzazione 1 | Compreso tra 1079px e 720px
480px | Visualizzazione 2 | Compreso tra 719px e 480px
0px | Smartphone | Inferiore a 480px
che siano errate queste impostazioni???
Nel frattempo ho aggiunto un'altra riga a quella di cui sopra e ho aggiornato un pò le istruzioni.
Il codice che ho è il seguente:
HTML
<div id="a">
<p>UNI EN ISO 9001:2015</p>
</div>
<div id="b">
<p>Sistemi di Gestione Qualità</p>
</div>
Esperto
#a {
font: 70px Sawarabi Gothic;
text-align: right;
color: #000000;
background-color: transparent;
font-weight: bold
}
@media only screen and (min-width : 0px) and (max-width : 480px) {
p { font-size: 20px;}
}
@media only screen and (min-width: 480px) and (max-width: 1224px) {
p { font-size: 20px;}
}
#b {
font: 60px Sawarabi Gothic;
text-align: right;
color: #ffffff;
background-color: transparent;
font-weight: bold
}
@media only screen and (min-width : 0px) and (max-width : 480px) {
p { font-size: 20px;}
}
@media only screen and (min-width: 480px) and (max-width: 1224px) {
p { font-size: 20px;}
}
Il problema sembra essere quello dell'allineamento a destra, che nel caso di media 0-480 resta a destra e quindi (forse) mi crea questo falso allineamento? Ho provato ad inserire text-align:center (o left) dopo il font-size in @media ma niente da fare... :-/
Da quello che vedo sul cellulare, essendo un testo su 1/2 riga/ghe, chiaramnete te lo manda a capo se non ha spazio, dovresti provare a diminuire finchè non trovi la misura giusta. (A me così comunque non dispisace
)
Leggendo dall'inizio il post ti era stato suggerito di inserire l'oggetto titolo al posto dell'oggetto testo, con l'oggetto titolo non servirebbe il codice perchè adatta automaticamente a tutte le risoluzioni.
N.B.: Alla visualizzazione con il menù esteso hai il menù che esce lateralmente a dx e obbliga a fare uno scroll orizzontale per vederlo tutto, cerca di posizionarlo nel modo giusto.
Author
Ma questo in visualizzazione da PC? Perchè io vedo correttamente tutto....forse dipende dalla risoluzione dello schermo del pc? Io ho 1920x1080
Author
Ho capito il problema qual è. In pratica io avevo applicato a questo codice html dei margini per far in modo che la foto di sfondo della cella si vedesse per almeno i 3/4 della pagina (in verticale). Mettendo questi margini a 200 per lato circa, in visualizzazione cellulare mi da quel problema.
Se invece provo ad eliminare i margini, mi formatta alla perfezione il testo su tutte le visualizzazioni, ma in questo modo però ho l'immagine di sfondo della cella troncata nella visualizzazione da pc.
Secondo te si può fare in modo da avere la cella più alta in visualizzazione da pc senza inserire i margini al testo?
Grazie.
P.s. se vedi ora il sito da cellulare e da pc avrai più chiaro il mio problema, se non sono stato bravo a spiegare.
http://www.accerta.it/uni-en-iso-9001-2015.html
Si dovrebbe poter vedere bene a tutte le risoluzioni, il 99% del tempo lo passo, per lavoro, davanti un notebook con risoluzione 1366x768 100% e qui mi da quel problema, secondo me non hai posizionato bene il menù alle posizioni intermedie finche non si presenta l'hamburger menù.
Sarebbe da lavorare con i codici e dovrei fare delle prove (ora non posso) l'unica cosa che ti chiedo, nell'inserimento dell'immagine di sfondo della cella come l'hai impostata ? Prova in Disposizione tra "Adatta al contenuto della cella" e "Non ripetere" se l'immagine di partenza e già abbastanza grande da riuscire a riempire la cella, e in Allineamento trova il compromesso più vicino al risultato ottimale
Author
Ciao Patrizia, rieccomi qua :-D
In questi giorni ho fatto tante tante prove, cambi ecc.
Alla fine ora direi che ci siamo quasi, ho solo un problema in homepage che non riesco a risolvere (versione da cellulare).
Ho fatto così:
Codice HTML
<div id="a">
<p>ACCERTA S.p.A.</p>
</div>
<div id="b">
<g>Organismo di Valutazione e Certificazione</g>
</div>
Esperto
#a {
font: "Merryweather Sans";
font-size: 80px;
text-align: right;
color: #ffffff;
background-color: transparent;
font-weight: bold;
margin-top: 350px;
margin-right: 50px;
}
@media only screen and (min-width : 0px) and (max-width : 480px) {
p { font: "Merryweather Sans"; font-size: 50px; margin-top: -200px; margin-bottom: 150px; margin-right: -50px;}
}
@media only screen and (min-width: 480px) and (max-width: 1224px) {
p { font-size: 20px;}
}
#b {
font: "Merryweather Sans";
font-size: 40px;
text-align: right;
color: #ffffff;
background-color: transparent;
font-weight: bold;
margin-bottom: 50px;
margin-right: 50px;
}
@media only screen and (min-width : 0px) and (max-width : 480px) {
g { font: "Merryweather Sans"; font-size: 15px; margin-top: -200px; margin-bottom: 150px; margin-right: -50px; text-align: right;}
}
@media only screen and (min-width: 480px) and (max-width: 1224px) {
g { font-size: 120px;}
}
In pratica qua ho definito font, posizione colore e grandezza di #a e #b e fin qui in visualizzazione desktop ci siamo. Poi ho usato il @media only screen dicendo che da 0 a 480px vorrei misura 50px, con margini sopra e sotto diversi dalle altre visualizzazioni e anche qua ci siamo. Il problema viene nel secondo @media only screen, mi prende solo il font size e il margin-right, non cambia niente invece se cambio margini top e bottom, cosa sbaglio???