Cos'è ElectroYou | Login Iscriviti

ElectroYou - la comunità dei professionisti del mondo elettrico

Problemi con sito responsive

Linguaggi e sistemi

Moderatori: Foto UtentePaolino, Foto UtenteMassimoB, Foto Utentefairyvilje

0
voti

[1] Problemi con sito responsive

Messaggioda Foto UtenteDarioDT » 7 mar 2016, 10:01

Ciao a tutti.
Ho sviluppato in modo amatoriale il sito dell'associazione di professionisti di cui faccio parte:
http://www.apuliaingenium.it

Sono partito da questo template free sviluppato con bootstrap:
http://binarytheme.com/bootstrap-background-slideshow-template-vega/

Il problema è che quando visualizzo il sito su un dispositivo mobile (molto utile la funzione debug di chrome attivabile con F12 che ti consente di simulare la visualizzazione del sito qualsiasi device) la scritta APULIA INGENIUM S.T.P. ecc non è centrata ma sopratutto il sito non ci sta tutto in orizzontale e si è costretti a muoversi da desta a sinistra.

A questo punto sono ripartito da zero per capire dov'è il problema che subito si presenta non appena inserisco la scritta APULIA INGENIUM S.T.P. più grande di NOW OR NEVER del template originale (22 caratteri contro i 12 dell'originale).
Di seguito il sito da cui sto ripartendo:
http://www.apuliaingenium.it/prova/new.html

Chi mi da qualche dritta?
Webmaster e informatici: siete autorizzati a maltrattarmi! :mrgreen:
Grazie,
Dario
ƎlectroYou e non smetti mai di imparare!
Avatar utente
Foto UtenteDarioDT
4.580 3 8 13
Master
Master
 
Messaggi: 1146
Iscritto il: 16 apr 2012, 20:13
Località: Bari

3
voti

[2] Re: Problemi con sito responsive

Messaggioda Foto UtenteSjuanez » 7 mar 2016, 16:25

Ciao, ovvio che succeda, glielo stai chiedendo tu! :D

Nel tuo css, alla classe head-main sono definite, in prima battuta, le proprietà della scritta:

Codice: Seleziona tutto
<h1 class="head-main">APULIA INGENIUM S.T.P.</h1>


Lo stile della scritta è:

Codice: Seleziona tutto
head-main {
    font-size: 80px !important;
    font-weight: 900!important;
    color: #fff!important;
    padding: 180px 20px 10px 20px;
}


In più sono definite le stesse (più o meno) grandezze fisse nello stile dell H1.

Codice: Seleziona tutto
    line-height: 80px;
    font-weight: 900;
    font-size: 60px;


Quando progetti responsive, non dovresti usare mai i "px" come unità di misura delle grandezze carattere. Molto più indicate le percentuali. O gli "em"

Poi considera che in boostrap gli headings non arrivano mai a più di 36px.
http://getbootstrap.com/css/#type-headings

Spero che anche nella fretta ti sia stato d'aiuto. Se poi non riesci vedo di risponderti con più calma.

Salutoni.
O_/ O_/ O_/
Più so e più mi accorgo di non sapere.

Qualsiasi cosa abbia scritto, tieni presente che sono ancora al mio primo rocchetto di stagno.
Avatar utente
Foto UtenteSjuanez
11,3k 5 8 13
G.Master EY
G.Master EY
 
Messaggi: 3480
Iscritto il: 18 mar 2015, 13:48

0
voti

[3] Re: Problemi con sito responsive

Messaggioda Foto UtenteDarioDT » 7 mar 2016, 19:21

Interessante!
Ho provato a fare qualche modifica al foglio di stile (io in realtà mi concentravo solo sulla parte delle grandezze fisse :roll: ) e riesco a far quadrare i conti.
Non conoscevo l'unità em che equivale a 16px, 100%.
Quindi se non ho capito male dovrei usare non più di 225% come grandezza, visto che in boostrap il massimo è 36px?
Nelle prove che ho fatto però riesco ad ingrandire fino al 450% senza scroll dello schermo.
Ho caricato quello che ho fato sempre in /prova/.new.html.
Grazie,
Dario
ƎlectroYou e non smetti mai di imparare!
Avatar utente
Foto UtenteDarioDT
4.580 3 8 13
Master
Master
 
Messaggi: 1146
Iscritto il: 16 apr 2012, 20:13
Località: Bari

1
voti

[4] Re: Problemi con sito responsive

Messaggioda Foto UtenteSjuanez » 8 mar 2016, 6:59

Non conoscevo l'unità em che equivale a 16px, 100%.

Roba da grafici, chi li capisce è bravo! :cool:

Quindi se non ho capito male dovrei usare non più di 225% come grandezza, visto che in boostrap il massimo è 36px?

È un'indicazione generale, che può essere anche disattesa come hai già sperimentato.

Ho caricato quello che ho fato sempre in /prova/.new.html.

Direi che ora ci siamo, ma su Iphone 5 ancora ti taglia un po' di scritta. Porta al 390% e stai più tranquillo.

Come già hai accennato, utilizza lo strumentino di google chrome. Ti dirò di più, se clicchi col destro su un elemento della pagina, e poi ispeziona ti si apre un piccolo editor in tempo reale dove puoi fare delle prove interessanti senza stare sempre a salvare il CSS.

Buon sito!

O_/ O_/ O_/
Più so e più mi accorgo di non sapere.

Qualsiasi cosa abbia scritto, tieni presente che sono ancora al mio primo rocchetto di stagno.
Avatar utente
Foto UtenteSjuanez
11,3k 5 8 13
G.Master EY
G.Master EY
 
Messaggi: 3480
Iscritto il: 18 mar 2015, 13:48

0
voti

[5] Re: Problemi con sito responsive

Messaggioda Foto UtenteDarioDT » 8 mar 2016, 7:02

Grazie 1000!
Dario
ƎlectroYou e non smetti mai di imparare!
Avatar utente
Foto UtenteDarioDT
4.580 3 8 13
Master
Master
 
Messaggi: 1146
Iscritto il: 16 apr 2012, 20:13
Località: Bari

0
voti

[6] Re: Problemi con sito responsive

Messaggioda Foto UtenteSjuanez » 8 mar 2016, 7:02

:D :ok:
Più so e più mi accorgo di non sapere.

Qualsiasi cosa abbia scritto, tieni presente che sono ancora al mio primo rocchetto di stagno.
Avatar utente
Foto UtenteSjuanez
11,3k 5 8 13
G.Master EY
G.Master EY
 
Messaggi: 3480
Iscritto il: 18 mar 2015, 13:48

0
voti

[7] Re: Problemi con sito responsive

Messaggioda Foto UtenteDarioDT » 8 mar 2016, 9:00

Tutto sommato l'ho sistemato e sono abbastanza soddisfatto.

Ultimi due problemi:
1) Solo con la visualizzazione con IPHONE5 il logo ed il menu di navigazione mi vengono su due righe separate :?:
2) Come faccio ad implementare il modulo dei contatti (server ARUBA) :?:

Grazie,
Dario
ƎlectroYou e non smetti mai di imparare!
Avatar utente
Foto UtenteDarioDT
4.580 3 8 13
Master
Master
 
Messaggi: 1146
Iscritto il: 16 apr 2012, 20:13
Località: Bari


Torna a PC e informatica

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti