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 :
Trinity Coret
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