CSS – Responsive

Volgorde CSS

De laatst opgenomen regel in het CSS bestand overschrijft de voorgaande regel.

CSS responsive maken

/* alle schermen groter dan mobiel */ 
@media (min-width: 400px) {
    ...
} 
/* alle schermen groter dan phablet = Een phablet is een kruising tussen een smartphone en een tablet */ 
@media (min-width: 550px) {
    ...
} 
/* alle schermen groter dan tablet */ 
@media (min-width: 750px) {
    ...
} 
/* alle schermen groter dan desktop */ 
@media (min-width: 1000px) {
    ...
} 
/* alle schermen groter dan Desktop HD */ 
@media (min-width: 1200px) {
    ...
}

icon in CSS plaatsen

  1. Wil je bijvoorbeeld een pijltje voor je menu-item plaatsen dan kun je dit in je CSS opnemen.
  2. Bij je menu class zet je bijvoorbeeld: “nav-button”.
  3. Je kunt op deze website een Unicode icon kiezen.
  4. Zweef met je muis over het gewenste icon uit deze lijst > copy > plak in CSS de icon tussen ” ” > je ziet dan gelijk de icon verschijnen.
.nav-button a:before {
content: "➜ ";
}

.nav-button a:hover:before {
content: '➜';
}

Of als je het pijltje achter wilt plaatsen, dan verander je “before” in “after

.nav-button a:after {
content: "➜ ";
}

.nav-button a:hover:after {
content: '➜';
}