Aufbau Mobil mit Kalender

Hallo liebe Community,

Ich habe meine Homepage (die ist noch nicht online) mittels CSS und Media Query aufgebaut.
Zusätzlich habe ich aus das Modul "Kalender" eingebaut.

Folgendes Probiere ich:
@media (min-width: 765px): Modul "Kalender" soll sichtbar sein - Modul "Eventlist" soll unsichtbar sein.
@media (max-width: 765px): Modul "Eventlist" soll sichtbar sein - Modul "Kalender" soll unsichtbar sein.

Wie kann ich so etwas umsetzen bzw. aufbauen?

Danke

Hallo Christian,

das sollte möglich sein, indem du jeweils in den Stylesheets die jeweiligen Module mit display:block; (anzeigen) und display:none; (ausblenden) markierst.

HTML-Code:

---

<style>
@media screen and (min-width: 765px) {
[class=^"mod_event"] { display: none; }
}

@media screen and (max-width: 764px) {
[class=^"mod_cal"] { display: none; }
}
</style>

---

Das Zeichen "^" kommt vor das Gleichheitszeichen.

HTML-Code:

---

@media (min-width: 765px) {
  [class^="mod_event"] {
    display: none;
  }
}

@media (max-width: 764px) {
  [class^="mod_cal"] {
    display: none;
  }
}

---

Das mit dem 764, 765 wollte ich auch gerade erwähnt haben.