Twety eleven - Bildgröße im Footer an Geräte anpassen

FriKuh

Hallo!
Ich habe ein Childtheme von twentyeleven erstellt und im footer ein Bild in 1000x288 px verwendet (entspricht der Header-Grafik). Für Monitore sieht das gut aus, aber auf dem Smatphone leider nicht.

Der komplette Bereich über dem Footer wird nach links zusammengeschoben und das Bild bleibt proportional viel zu groß. Aus diesem Grund hätte ich es gerne gar nicht angezeigt.
Was muss ich tun, damit auf mobilen Geräten ein alternativer Text angezeigt wird und das Bild schlichtweg verschwindet?
Vielen Dank für Eure Hilfe!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Hiermit verhält sich das Bild im footer wie die Header-Grafik und passt sich in der Grösse an:

Code

#colophon img {
    display: block;
    height: auto;
    width: 100%;
}

Um es gegen Text auszutauschen, benutzt man sog. Media Queries, die ab einer bestimmten Breite das Bild verstecken und einen Alternativtext, der vorher versteckt ist, anzeigen.

Code

#colophon img {
    display: block;
    height: auto;
    width: 100%;
}
#colophon div.alternativtext {
    display: none;
}


@media screen and (max-width: 768px) {
    #colophon img {
        display: none;
    }
    #colophon div.alternativtext {
        display: block;
    }
}

Alles anzeigen

In den footer setzt Du dann noch den Text dazu:

Code

<footer id="colophon" ..>
    <img alt="Footer" ..>
    <div class="alternativtext">Dein Text usw.</div>
</footer>

FriKuh

Vielen Dank für die schnelle Hilfe!:D
Habe mich jetzt erst mal für's verkleinern entschieden, aber den Alternativtext probiere ich in den nächsten Tagen auf jeden Fall auch aus!

b3317133

Wenn Du richtig verkleinern willst, dann setze den ersten Code-Block einfach in das normale CSS, nicht in die Media Queries.

Zudem fehlt jetzt nach Media (max-width: 450px) { eine Klammer zu: }

FriKuh

Danke. Funktioniert :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twety eleven - Bildgröße im Footer an Geräte anpassen

Jetzt mitmachen!

Benutzer online in diesem Thema