Problemi con sito responsive

[DarioDT]

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!
Grazie,
Dario

[Sjuanez]

Ciao, ovvio che succeda, glielo stai chiedendo tu!

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.

[DarioDT]

Interessante!
Ho provato a fare qualche modifica al foglio di stile (io in realtà mi concentravo solo sulla parte delle grandezze fisse ) 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

[Sjuanez]

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

Roba da grafici, chi li capisce è bravo!

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!

[DarioDT]

Grazie 1000!
Dario

[Sjuanez]

[DarioDT]

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