Logo bei OceanWP fehlt am Smartphone

Endlich mit allem fertig und dann das: Das Logo bei OceanWP im Header wird nicht mehr auf Smartphones angezeigt. Das darf doch nicht wahr sein. Wie ihr euer Logo bei OceanWP auch am Smartphone wieder anzeigen lassen könnt, erfahrt ihr in diesem Blogartikel.

Logo bei OceanWP plötzlich verschwunden

OceanWP bietet ein tolles und nicht überladenes WordPress-Theme für einen reinen Blog. Da ich OceanWP von einem anderen Projekt bereits kannte, habe ich mich für dieses Theme entschieden. 

Nachdem alles fertig war, ich mit allen Bereichen zufrieden war, ging es ans Testing mit dem Smartphone. Warum ihr mit dem Smartphone testen solltet, erkläre ich im Blogartikel Testing mit dem Smartphone.

Dann der kurze Schockmoment: Das Logo bei OceanWP im Header und im Footer wird nur als Textlink mit einem Rahmen angezeigt. Grässlich. Natürlich kam mir direkt der Gedanke, da ich iPhone-Nutzer bin, dass es etwas mit den Retina-Einstellungen zu tun hat. Bilder neu dimensioniert, neu hochgeladen und Logo und Retina-Logo im Customizer ersetzt. Nichts passiert. 

Danach das ganze nochmal, alles restlos gelöscht, vor allem auch die ganzen Caches. Nichts passiert. Browsercache geleert. Nichts passiert. Das darf ja nicht wahr sein. Bevor ich mich verrenne und Zeit verschwende, habe ich gegoogelt.

Tatsächlich haben auch schon andere Nutzer dieses Problem gehabt. Eine „offizielle“ Lösung habe ich nicht gefunden. Einige haben auch nicht funktioniert, andere nur teilweise. 

Logo bei OceanWP wieder aufs Smartphone bringen

Jetzt zur Lösung, die tatsächlich funktioniert und für jedermann umsetzbar ist. Ich bin der Meinung, WordPress und die ganzen Themes und Plugins können sich nur benutzerfreundlich nennen, wenn Bugs auch für Laien behebbar sind und bleiben.

Fügt folgende Zeilen im Customizer in den Bereich „Custom JS/CSS“ ein:

@media only screen and (max-width: 959px) {
body.default-breakpoint #site-logo.has-responsive-logo .custom-logo-link {
display: block;
}
}

@media (max-width: 480px) {
#site-logo #site-logo-inner a img, #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
max-width: 130px;

Danach alle Caches in WordPress leeren und evtl. auch den eigenen Browsercache leeren, danach könnt ihr testen. Ich habe es im Inkognito-Modus von Chrome und Safari auf dem iPhone getestet und das Problem mit dem fehlenden Logo bei OceanWP im Header beim Smartphone war gelöst.

Hat’s bei euch geklappt? 

Wenn ihr weitere Tipps und Tricks rund um WordPress lesen wollt, dann schaut in meinem WordPress Blog vorbei.