Problematica CSS (tag html,body)

MTeo1994

Nuovo Utente
8 Nov 2018
4
0
1
Buongiorno,
scrivo questo post poiché dopo 2 mesi non ho ancora trovato una soluzione nonostante avessi chiesto aiuto a programmatori da tutte le parti del globo.

Sto programmando un sito nel quale mi si presenta questa problematica...

Innanzitutto il sito è formato da una barra di navigazione con ancore, subito sotto uno slideshow, una gallery ed un form contatti.

CSS da prendere in oggetto è:
HTML:
html,body{
width:100%;
height:100%;
}
Una volta finito di programmarlo, il sito web per dekstop è filato liscio come l'olio, ma nel momento in cui apro il sito tramite smartphone (e non facendo tramite ispeziona elemento), gli elementi della pagina si adattano in continuazione muovendo gli elementi quindi rendendo inutilizzabile il sito.

Fino ad un anno fa riuscivo a colmare questa problematica usando la funzione overflow quindi:

su mobile:
HTML:
html,body{
width:100%;
height:100%;
overflow-x:hidden;
}
ad oggi se faccio questo, mi si sballano continuamente le ancore, quindi se avevo creato un ancora (tipo #contatti) mi rimanda alla homepage o a metà sito, questo sia su smartphone che su desktop, e non più alla fine come programmato... in più il sito diventa impossibile da scrollare da smartphone, in quanto diventa lentissimo lo scorrimento.

Chiedo aiuto perchè penso di essere al limite della pazienza, tra poco butto via il pc.

GRAZIE A CHI MI AIUTERA'.

Cordiali Saluti.
Marco.
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.312
334
83
Aiutarti a sistemare un sito per tutte le risuluzioni senza poterci mettere le mani sopra è già difficile poi con quelle quattro regole css che hai postato diventa proprio impossibile.
L'unica cosa che ti posso dire è di trasformare il sito in responsive! Se non sai come fare bisogna che tu legga qualche guida anche di quelle che puoi trovare in rete

[MOD]
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro
 

MTeo1994

Nuovo Utente
8 Nov 2018
4
0
1
La ringrazio molto Max, non ero a conoscenza di questo tag "codice" nel forum. Grazie per averlo sistemato.
La problematica non è il responsive, e nemmeno tutto il resto del codice css ed html.
La problematica si pone proprio su quelle 4 linee di codice, sopratutto sul tag "overflow-x:hidden". Per quello non ho postato tutto il codice del sito, perchè sarebbe risultato inutile.
 

MTeo1994

Nuovo Utente
8 Nov 2018
4
0
1
Penso ci sia un contrasto tra
Codice:
html,body{....} con overflow-x:hidden
Su questo io chiedevo l'aiuto. Mi scusi se non sono stato chiaro.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Senza avere il sorgente sottomano o qualche esempio pratico c'è poco da discutere, per quanto riguarda il menu immagino che il problema delle ancore sia dato dal fatto che hai utilizzato delle dimensioni percentuali (ed uguali o inferiori al 50% di width) per gli elementi che le "contengono", questo implica che nella visualizzazione mobile gli elementi si ridispongano magari allineandosi ad altri elementi che contengono altre ancore, per cui 2 ancore possono coincidere graficamente, l'unico consiglio che posso provare a darti (che non sapendo com'è strutturato il sito potrebbe anche fare peggio che meglio) è provare ad assegnare a tutti gli elementi ancora la regola
Codice:
display: block;width:100%;
e di togliere eventuali attributi inline nel sorgente HTML di modo che gli elementi a qualsiasi visualizzazione si vedano "impilati" uno sotto l'altro.
Onestamente non so neanche in che caso possa essere utile la regola overflow-x visto che per principio rende graficamente inaccessibile un qualsiasi contenuto al quale lo applichi, se ci dai il sorgente (preferibile) o qualche screenshot capiamo meglio e possiamo darti consigli più mirati.
In ogni caso ti sconsiglio fortemente di provare a controllare le altezze (height:100%;) perché è una giungla di regole e visto che al giorno d'oggi le visualizzazioni mobile sono nettamente più importanti di quelle desktop (vedi la diffusione di smartphone), controllando le altezze è impossibile avere un layout che si adatta a tutti i contenuti e nella quasi totalità dei casi lo sforzo non vale il risultato da ottenere.