Das Kopfbild in den responsive Designs immer anzeigen

Gerade auf kleinen Displays ist der Platz kostbar. Daher wird in den responsive Designs responsive_one und responsive_two das Kopfbild beim Unterschreiten des Schwellenwerts von 48em (768px) automatisch verborgen. Hier erfahren Sie, wie Sie dafür sorgen können, dass das Kopfbild auch auf kleinen Schirmen angezeigt wird.

Und so geht's

Hinterlegen Sie das folgende Media-Query im CSS-Code für das Projekt:

CSS-Code

@media only screen and (max-width: 48em) {

  .header-banner, #headerPic {

    display: block;

  }

}

Mit dieser Regel übersteuern Sie das Media-Query des Designs. Das Kopfbild wird nun einfach immer entsprechend verkleinert dargestellt.

Vorher: Kopfbild verborgen

Nachher: Kopfbild bleibt sichtbar