CSS3 Tutorial Italiano 25 - Parliamo di Responsive Design

[@EdoardoMidali]

⚡ É uscito il Corso CSS Zero ad Avanzato in 20 ore sul mio sito codegrind.it/corsi/corso-css-completo/ Non solo vedremo CSS, ma vi parleremo di tutto l'ecosistema che gli ruota attorno come i vari framework, preprocessori, accessibilità, performance, web design e tanto altro.😎👍

[@device4090]

Questo video è oro.

[@EdoardoMidali]

😎😎

[@Fabiosoluzionipc]

Ciao ho seguito il corso di html e css ho imparato tantissime cose però non riesco a capire come rendere un sito responsive, ho capito che devo usare flexbox o al max grid ma quali sono i valori da impostare per i vari tag?puoi fare un altro video su responsive e flexbox insieme?grazie

[@Daniele-cr5wh]

Ho riscontrato un problema. In pratica inserendo la seconda @media screen and (max-width : 800px) col 40% di larghezza delle colonne, applicava la modifica ma parallelamente annullava la prima @media screen and (max-width: 500px) con larghezza auto. Ho risolto semplicemente scrivendo la regola degli 800px prima di quella dei 500px ed è andato tutto bene. Non capisco perché a me ha dato questo problema mentre a te è andato tutto liscio. Non è la prima volta che mi succede e anzi, riscontro spesso anche su altri programmi questa anomalia dell'ordine in cui vengono scritte le regole CSS e non ho mai capito da cosa possa dipendere. Se lo sai o se ti mai capitato mi piacerebbe davvero sapere il motivo proprio per una curiosità personale, perché dal punto di vista tecnico ormai so come risolvere il problema.

[@andreapastore3572]

Ciao Edoardo, ho inserito i 4 paragrafi all’interno di un div, a cui ho assegnato un display: flex e un justify-content: space-evenly, per centrare il tutto. Adesso vorrei che i miei 4 elementi (tramite media query), sotto i 1000px (ad esempio) prendessero la width: auto! È possibile conciliare le due cose?

[@EdoardoMidali]

Assolutamente si, se non te lo fa in flex semplicemente con la media query ridichiara il display. In realtà però dovresti lavorare al contrario anche se non è facile. Parti sempre a scrivere codice CSS pensando al mobile e poi con le media query se proprio le devi usare adatti il tutto al desktop. Pensa sembra "mobile first" perchè i telefoni coprono buona parte del traffico web.

[@andreapastore3572]

@@EdoardoMidali nella media query ho dichiarato ( oltre alla width:auto per i paragrafi) anche un display:initial per il div contenitore, e ha funzionato! Grazie!

[@leogds6623]

Ciao Edo video bellissimo Volevo chiederti una cosa: è da ieri che quando provo a creare una pagina web usando un file html e uno css, le cose che scrivo nel css è come se non le avessi scritte, cioè se imposto un colore per una scritta non mi imposta quel colore e stessa cosa per i display, i background e tutto il resto. Cosa posso fare?

[@EdoardoMidali]

controlla con l'inspector del browser per capire se viene almeno scaricato come file. Parti da li