+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 7 su 7

Cambiare la disposizione dei div in base alle media query

  1. #1
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Buon giorno a Tutti

    Come si capirà sono alle prime armi con html e le media query.

    Sto comunque tentando di creare un sito che potrete visitare a questa pagina :
    ****link rimosso****

    Come potrete vedere sotto la messaggio di benvenuto ho 6 div con relative immagini e li ho posizionati così :

      	<div class="container-schede"> 
    		<div class="scheda1"; ><img src="PRESENTAZIONE.gif" alt="CSS" class="elastic";/></div>
    		<div class="scheda2"; ><img src="TERRITORI.gif" alt="CSS" class="elastic";/></div>
    		<div class="scheda3"; ><img src="PRODOTTI.gif" alt="CSS" class="elastic";/></div>
    	</div>
    	<div class="container-schede"> 
    		<div class="scheda4";><img src="FINANZA.gif" alt="CSS" class="elastic"; /></div>
    		<div class="scheda5";><img src="TURISMO.gif" alt="CSS" class="elastic"; /></div>
    		<div class="scheda6";><img src="NORMATIVE.gif" alt="CSS" class="elastic";/></div>
    	</div>
    
    Ponendo la larghezza nel css a 33% dei rispettivi div.

    Adesso sto provando di adattarlo al display di un mobile e come prima step usando la media query :

    @media (min-width: 320px) and (max-width: 480px)
    
    e vorrei che si posizionassero i suddetti riquadri due alla volta e non tre come sul desktop.

    Forse dovrei usare il display none per nascondere quello su desktop, ma come faccio a impostare dei div diversi nel css ?

    Chiaramente per chi vorrà gentilmente aiutarmi, potrà vedere sia l'index che il css dal visualizza sorgente pagina del sito.

    E visto che mi trovo, devo usare un file.js per ottimizzare le media query ?

    Grazie ed ottima giornata.

    Domenico
    Ultima modifica di @Alex; 28-02-2021 07:08  Motivo: link anomalo
    ℹ️ Leggi di più su Domenico_Falco1 ...

  2. #2
    L'avatar di @Alex
    @Alex non è in linea Moderatore Globale
    Ho rimosso il link decisamente strano... puoi darci un chiarimento...?
    Grazie
    ℹ️ Leggi di più su @Alex ...

  3. #3
    Già che ci sei chiarisci anche come mai esiste un account DOMENICO_FALCO e un Domenico_Falco1
    ℹ️ Leggi di più su AntonioG ...

  4. #4
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Adesso ho letto le vostre risposte, non ricordo che link era strano e forse pensando di aver sbagliato l'iscrizione mi sarò iscritto di nuovo, ma davvero parliamo di un secolo fa, bastava cancellare il primo account, senza partire in quarta. Se proprio non vi sono simpatico, potete cancellare anche questo. saluti.
    ℹ️ Leggi di più su Domenico_Falco1 ...

  5. #5
    L'avatar di @Alex
    @Alex non è in linea Moderatore Globale
    Sulla simpatia non mi esprimo nonnho elementi, ma di certo se pensi che il Forum sia a TUA disposizione per gedtire N Account stai sbagliando, dovresti avere più rispetto per il forum.
    Non serve cancellarti...
    ℹ️ Leggi di più su @Alex ...

  6. #6
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Quote Originariamente inviato da Domenico_Falco1 Visualizza il messaggio
    Buon giorno a Tutti
    e vorrei che si posizionassero i suddetti riquadri due alla volta e non tre come sul desktop.
    Sei tu che hai suddiviso i riquadri esplicitamente in due righe (container-schede) mettendo in ciascuno tre elementi (schedaN): in questo modo, diventa praticamente impossibile disporli in modo diverso senza impazzire.

    Anche la struttura HTML deve essere progettata per consentire al CSS di adattarla a diversi dispositivi.

    Quello che dovresti fare è creare un unico contenitore per le tue schede e inserirle tutte al suo interno: giocando sulla diversa dimensione delle singole schede, che andrai a differenziare usando le "media query" appunto, dovrai fare in modo che sullo schermo più ampio ve ne stiano tre, mentre su quello più piccolo solo due.

    Questo risultato dovrà ovviamente basarsi sul fatto che, tarando la dimensione delle schede in modo diverso per i due layout, andranno a capo in modo diverso (ogni 3 schede nel layout con schermo più ampio, ogni 2 con schermo più ristretto).

    L'alternativa per soffrire meno è quella di adottare un framework CSS che abbia queste feature, come Bootstrap ad esempio.

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

  7. #7
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Grazie dell'aiuto ed ottima giornata.
    ℹ️ Leggi di più su Domenico_Falco1 ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Cambiare icona alle singole maschere di Access2010
    Da federicodi84 nel forum Microsoft Access
    Risposte: 8
    Ultimo Post: 12-06-2014, 18:50
  2. [VB.NET]: Stampare un DatagridView in base alle colonne!
    Da maninblack nel forum Visual Basic .Net
    Risposte: 2
    Ultimo Post: 17-12-2013, 13:34
  3. cambiare colore alle righe della casella di riepilogo
    Da scrok nel forum Microsoft Word
    Risposte: 4
    Ultimo Post: 27-02-2012, 17:38
  4. Risposte: 13
    Ultimo Post: 04-10-2010, 16:13
  5. Estrarre righe da tabella in base alle condizioni imposte
    Da faber83 nel forum Microsoft Access
    Risposte: 6
    Ultimo Post: 09-09-2010, 15:40