Sito Responsive - Breakpoint 
Autor: SONIA FARINABuongiorno,
ho creato da nuovo un sito web responsive https://www.idrotermicafarina.it/ con 5 breakpoint (in allegato) in modo da renderlo responsive alle varie visualizzazioni. Il problema è che non riesco a visualizzarlo correttemente da Smartphone.
Riesco a vedere perfettamente Header e Footer e i relativi contenuti; sono i file/tabelle/immagini ecc. delle pagine (anche avendo messo le relative interruzioni riga) che non si vedono giusti: si creano delle barre di scorrimento sotto alcuni elementi, probabilmente perché sono troppo grandi e "non ci stanno nella pagina"?
Come posso fare? Creo altri breakpoint o il problema è un altro? Possibile sia un problema dello smartphone? Aggiungo infatti che da Iphone 7 plus si vede perfettamente mentre da Samsung note 8 per niente (le dimensioni degli schermi sembrano simili a mio parere).
Grazie mille a chi risponderà!
Se ti riferisci alle immagini in homepage da Huawei lo vedo bene senza barre di scorrimento le altre pagine sono in costruzione
Stesso discorso per me con Samsung S + 8 funziona tutto perfetto
... l'ultimo breakpoint è a 480px...
... forse potrebbe essere utile un ulteriore breakpoint finale a 320-380px (telefonini)...
... per la tabella si crea uno scroll orizzontale minimale, che non da fastidio...
... se proprio vuoi e se ti interessa, potresti usare un mio codice EXTRA per le tabelle elastiche...
,
ciao
.
Autor
Benissimo per quelli che funzionano, grazie mille!
Invece per il discorso di aggiungere un breakpoint minore non so se servirebbe, essendo il note 8 un telefono "bello" grande (?) In più il problema in realtà si manifesta anche con altri Samsung più piccoli.
Il codice Extra sarebbe html? Come dovrei procedere?
Grazie a tutti!
Autor
Ho provato ad aggiungere il breakpoint, funziona!
Quasi tutto ;) resto incuriosita lo stesso dal codice, grazie!
prova nella pagina della tabella ad inserire questo:
nelle Proprietà della Pagina > ESPERTO >| prima della chiusura del tag HEAD
<style> table {word-break: break-all;} </style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
... sì, va già meglio...
... per elasticizzare con il mio codice la tabella della pagina [Info & Contatti] sotto ai 480 pixel, prova ad incollare il codice che segue nella sezione:
>> Passo 3 - Mappa > Proprietà Pagina > Sezione Esperto | ▪Codice personalizzato: >▼Prima della chiusura del tag HEAD
... codice:
<style> @media (max-width: 480px) {
table, table * {width:100% !important;word-break:break-word;}
#imCell_3 div {overflow-x: hidden !important;}} </style>
,
ciao
.
... OK, ...mi ha preceduto Mirko
con una variante del mio codice a livello globale, sempre valida in ogni caso...
.
ciao