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.449
338
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Consiglio su problematica impianto videosorveglianza IP Cam e Videosorveglianza 4
Marcolotto [Actionscript 3.0] problematica con movieClip.play() movieClip.stop() Flash 0
Sargon motore di ricerca avanzato (particolare problematica) PHP 12
zerobit Una query problematica MySQL 13
D Esportazione problematica tabella access in csv. MS Access 0
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2

Discussioni simili