Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Problema visualizzazione div responsive

    Salve a tutti,
    sto "trasformando" una pagina.html da layout fisso a responsive di un sito concepito oltre 10 anni fa.
    La pagina è questa

    nella visualizzazione da desktop diciamo che mi va bene così (con il 1° blocco e l'immagine affiancati, e gli altri 2 blocchi sotto);

    mentre nella visualizzazione da dispositivo mobile (restringendo la finestra del browser) va bene che si vedano nell'ordine il 1° blocco, l'immagine, il 2° e il 3° blocco,
    solo che il 3° blocco di testo non riesco ad incollonarlo a sinistra (sotto il 2°blocco), ma mi rimane come rientrato verso destra. :dhò: :cry:
    Spero di essermi spiegato bene.

    Qualcuno sa dirmi come posso fare perché restino tutti incollonati sulla sinistra, solo nella visualizzazione mobile?

    Grazie
    La vita è una tempesta, prenderlo in .... è un lampo!
    Paolino

  2. #2
    Nessuno mi sa dire qualcosa?
    La vita è una tempesta, prenderlo in .... è un lampo!
    Paolino

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao.

    Per non stravolgerlo troppo dato che � stato fatto pi� di 10 anni fa (probabilmente ci sarebbero da fare diversi aggiustamenti) io proverei cosi:

    - Ad una certa dimensione (scegli tu quale) applichi una media query

    codice:
    @media only screen and (max-width: 767px) {
        .classe-da-dare-ai-div {
            display: block; // togli il display: inline-block che hai messo nello style inline
            padding-left: 0; // togli il padding-left che hai messo nello style inline
            max-width: 80%; // togli il max-width 100% che hai messo nello style inline e metti 80% o quello che vuoi cosi poi la propriet� margin 0 auto lo centra
        }
    }
    Cosi dovresti ottenere l'effetto desiderato. Metti una classe comune a div (BLOCCO1, immagine, BLOCCO2 e BLOCCO3).

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Anzi non togliere gli stili inline altrimenti perdi le regole sopra i 767 px. Alla fine di ogni proprietà dentro la media query aggiungi !important. In questo modo dovrebbero avere la precedenza sugli stili inline.

    Non è il più elegante dei modi ma è il primo che mi è venuto in mente senza dover cambiare troppe cose.

    Prova a vedere se intanto può andare bene.

  5. #5
    Innanzittutto grazie per avermi risposto!
    Poi grazie per la tua soluzione: funziona!

    Mi hai risolto il problema: io non ho una così approfondita conoscenza dei css, specialmente della proprietà !important, e spesso mi ci picchio
    Ecco qui il risultato, testato con IE11, FF e Chrome 63.0 .

    Poi provo ad applicarlo anche ad altri div simili.

    Sei stato gentilissimo.
    La vita è una tempesta, prenderlo in .... è un lampo!
    Paolino

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.