Header Image Responsive machen oder durch Text ersetzen

tobiCOM

Hi Leute habe ein kleines Problem mit meinem Theme
auf dem iPhone wird das Header Logo zu groß angezeigt, habe desshalb in die style.css folgendes integiert, will aber irgendwie nicht! http://iphone4ever.eu
Wenn möglich hätte ich gern überhaupt am iPhone kein Image Header sondern nur Text, geht das?

Media (max-width:480px){
#logo{
background-image: url(http://iphone4ever.eu/iphone4evermob.jpg);
}

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

FlorianBrinkmann

Moin,

nein, so klappt das nicht. Du hast das Logo ja als img-Tag eingebunden, dann kannst du es nicht per CSS irgendwie verändern (also jedenfalls nicht die Quelldatei. Außerdem finde ich gerade die id "logo" nicht im Quelltext?!). Was gehen würde wäre, dass du dem Bild eine maximale Breite von 100% gibst, so:

Code

#site-title img{
max-width:100%;
height:auto;
}

Und dann muss bei dem #branding noch das "float:left" weg. Am besten nimmst du diese Änderungen in einem Child-Theme vor.

tobiCOM

Besten Dank das hat geholfen!
jetzt bleibt nur noch ein kleines Problem:
Wie schaffe ich es das der Content bündig am Rand abschließt sonst ist ja der Beitrag so schmal?!

mensmaximus

Einfach float und width entfernen bei .post-thumbnail und .post-wrap für Media mit max-width:480px

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header Image Responsive machen oder durch Text ersetzen

Jetzt mitmachen!