Header Section - Media Blockwechsel

Hier ein weiteres Beispiel, wie man ganz einfach für eine andere Displaygröße, wie zum Beispiel am Smartphone, einen anderen Block anzeigen lassen kann. Hier ein Beispiel als "Video zu Bild" und hier ein weiteres Beispiel als "Bild zu Bild".

Auf dieser Seite habe ich zwei unterschiedliche Blöcke als Header verwendet, die beide direkt untereinander auf der Seite eingefügt wurden und nur unterschiedliche Klassen für ihre Anzeige tragen.

Dem ersten Block habe ich am <section> Tag diese zusätzlichen Bootstrap-Classes gegeben:

class="header6 d-none d-lg-block"


Die class="header6" steht bereits von Mobirise an diesem Header-Block. Die beiden zusätzlichen Klassen bewirken:

d-none = display-none = nicht anzeigen
d-lg-block = display-large-block = zeige an ab großen Display, also >=992px

Dieser erste Block wird also nur bei einer Displaygröße ab 992px und mehr angezeigt.

Bitte verwendet als kleinste Anzeigegröße d-lg-block (992px), da alles, was kleiner ist als zum Beispiel d-md-block (768px), in der Arbeitsansicht von Mobirise nicht mehr auf die Block-Werkzeuge zugreifen und bearbeitet oder gelöscht werden kann. Sollte dies versehentlich geschehen, könnt ihr die entsprechenden Klassen in der Projektdatei "project.mobirise" entfernen, um den Block wieder sichtbar zu machen.

Dem zweiten Block habe ich am <section> Tag, die gleichen Bootstrap-Classes gegeben, nur eben umgekehrt:

class="header6 d-block d-lg-none"


Die class="header6" steht bereits von Mobirise an diesem Header-Block. Die beiden zusätzlichen Klassen bewirken:

d-block = display-block = zeige diesen Block an
d-lg-none = display-large-none = nicht anzeigen ab großen Display, also >=992px

Dieser zweite Block wird also nur bis zu einer Displaygröße von 991px angezeigt.


Bitte lest zu den Grid-Größen und den Breakpoints diese Bootstrap-Seite:

https://getbootstrap.com/docs/5.0/layout/grid/#grid-options

Bitte lest zu diesen "display" (Anzeige) Klassen diese Bootstrap-Seite:

https://getbootstrap.com/docs/5.0/utilities/display/

Diese Technik lässt sich selbstverständlich weiter unterteilen und auch für verschiedene Displaygrößen anpassen.

Solche Media-Abfragen können innerhalb desselben Blocks natürlich auch über CSS erstellt werden, wie zum Beispiel in diesem Video-Block, der je nach Displaygröße unterschiedliche Videos anzeigt. 

Ich verwende hier also ein Video am Desktop und ein Bild am mobilen Gerät, wie unten dargestellt.