Mobirise Tutorials

Position Header Beschriftung

Manchmal enthält der obere Header-Bereich ein Bild, bei dem es unerwünscht ist, dass die Beschriftung über einem wichtigen Element, wie zum Beispiel einem Gesicht, platziert wird. Dies ist besonders problematisch bei der responsiven Anpassung auf Smartphones, da die Beschriftung dann möglicherweise direkt über dem Gesicht erscheint und große Bereiche sogar verdecken kann.

In diesem Beispiel habe ich über die Text-Werkzeuge von Mobirise das <h1> Tag der Überschrift links positioniert und die anderen Beschriftungen sowie die Buttons rechts positioniert.

Zur Anzeige am Smartphone habe ich die nachstehende Media-Anweisung bis 767px Displaybreite speziell für diese Seite erstellt. Dabei wird mit der Anweisung:

align-self: flex-end;

bereits alles an den unteren Bereich geschoben.

Mit der optionalen Anweisung margin-bottom: -10% schiebe ich den gesamte Schriftblock um weitere 10% herunter.

Die zusätzlichen Anweisungen können optional verwendet werden. Mit der zweiten, dritten und vierten Anweisung zentriere ich alle Texte, die am Desktop links oder rechts positioniert sind. Zudem verwende ich die Klasse "myhidden", um Elemente auf Smartphones auszublenden, die auf dem kleinen Display nicht angezeigt werden sollen.

@media (max-width: 767px) {
 .myposition {
  align-self: flex-end;
  margin-bottom: -10%;
 }
 .mbr-section-title {
  color: #ffffff;
  text-align: center;
 }
 .mbr-section-subtitle {
  text-align: center;
 }
 .mbr-text, .mbr-section-btn {
  text-align: center;
 }
 .myhidden {
  display: none;
 }
}


Das sieht dann im "Code Editor" so aus. Ich habe die Klassen alle farbig markiert.