Mobile Ansicht: Logo überlappt Content (Tatami-Theme)

Tralldir

Hallo Zusammen,

es geht um folgende Webseite: http://www.lernensichtbarmachen.ch

In der mobilen Ansicht (getestet auf einem iPhone) überlappt das Logo aus dem Headerbereich den restlichen Content. Damit wird die Webseite leider unbenutzbar. Das gleiche Phänomen tritt auf, wenn das Fenster mit Firefox verkleinert wird. Hier passt sich das Logo zwar auf eine anscheinend fixe Grösse an, wird dann aber ab einer bestimmten Fenstergrösse wieder grösser und überlappt den restlichen Content. Das Problem tritt sowohl im Firefox als auch im IE auf.

Hier hat man mir empfohlen folgenden Code einzufügen:

Code

@media screen and (min-width:320px){
.site-title a.logo {max-width: 180px;}
}

Doch leider hatte der Code nicht den gewünschten Effekt. Das Logo wurde nur noch klein dargestellt, egal in welcher Fenstergrösse.

Bin dankbar für Tipps und Hinweise!

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

Kirchenschnack

Tausche doch mal die Zahlen im Code gegeneinander aus. Im Moment steht da das Logo darf maximal 180px groß werden

Tralldir

Hallo,

danke für den Hinweis.

Leider hatte das nicht die gewünschte Wirkung. Der Code hat auch eine Wirkung auf die normale Ansicht (z.B. Desktop PC mit Firefox). In der mobilen Ansicht (Hochformat iPhone) überlappt das Logo noch immer. Ich möchte das Logo in der normalen Ansicht so belassen wie es ist.

Noch jemand eine Idee?

Danke im Voraus :-)

Nachtrag: Mittlerweile ist WP 3.8 installiert (der Hoster erlaubt noch keine höhere Version...)

Kaycosmic

Versuchs mal hiermit:

Code

@media screen and (max-width: 480px) {
    /* Custom Logo */
    .site-title a.logo {
        max-width:180px;
    }
}

Kirchenschnack

Sollte der Tipp von Kaycosmic nicht kappen würde mir noch dieses Plugin einfallen: http://designsbynickthegeek.com/plugins/genesis-responsive-header ist aber längst nicht so schön wie eine Lösung per CSS.

Tralldir

Danke Kaycosmic!

Das hat tatsächlich funktioniert. Scheint wohl "nur" am "max-width" gelegen zu haben. Vorher hatte ich ja "min-width" definiert.

Danke auch an Kirchenschnack für den Tip mit dem Plugin! Muss die Webseite in der mobilen Ansicht noch etwas testen, eventuell kann/muss ich darauf zurückkommen.

Kirchenschnack

Wieso das Kaycosmic hat doch gute Arbeit gemacht es sieht zumindest auf meinem Samsung S3 jetzt gut aus. nur das Suchfeld wird durch das Logo noch überdeckt.

Tralldir

Du hast recht. Das überdeckte Suchfeld ist noch ein Manko. Danke für die Meldung, dass es auf deinem S3 gut aussieht.

Kaycosmic

Für das Suchfeld musst du in der style.css ab Zeile 500 z-index: 10; ergänzen.

Code

.active-nav .container .sidebar-left {
    position: relative;
    margin-left: 0px;
    margin-top: 0px;
    width: 81.25%;
    height: auto;
    z-index: 10;
}

Tralldir

Danke Kaycosmic für den Tip.

Leider hatte dies nicht den gewünschten Effekt. Das Logo überlappt das Suchfeld noch immer etwas.

Kirchenschnack

Code

margin-top: 5%;

Versuche mal den code von Kaycosmic so zu ändern. Bin aber leider kein CSS Kenner. Das ist reine vermutung das es etwas bringt.

Kaycosmic

style.css Zeile 451 z-index auf 5 setzen, bei mir hat es funktioniert.

CSS

.js .container .sidebar-left {
    position: relative !important;
    height: 0px;
    overflow: hidden;
    margin-left: -100%;
    margin-top: 0px;
    float: left;
    z-index: 5;
}

Kirchenschnack

Kommt wiedermal auf das Gerät an scheinbar.

Tralldir

Danke für eure Hinweise!

Kirschenschnack: margin-top hat leider nicht funktioniert.

Kaycosmic: auf meinem iPhone hat das leider keine Wirkung gezeigt. Auf einem anderen Gerät kann ich es gerade nicht testen. Habe die Änderung aber mal stehen lassen.

Kaycosmic

Hi, auf meinem iPhone 5 siehts auch gut aus, vielleicht hat der Safari deines iPhones noch die Seite im Cache und so wird die Änderung noch nicht angezeigt. Wenn du dir die Seite im Firefox anschaust und das Fenster kleiner ziehst, siehst du auch wie es wahrscheinlich auf mobilen Endgeräten aussehen wird.

Tralldir

Perfekt! So konnte ich die Auswirkungen nachvollziehen. Funktioniert!

Auf meinem iPhone habe ich den Cache zwar geleert und das Suchfeld überlappt noch immer... aber das schiebe ich jetzt erst mal auf mein iPhone.

Nochmal Danke für die ausserordentlich schnelle und kompetente Hilfe!

Kirchenschnack

S3 macht es leider auch noch

Tralldir

Funktioniert nun auch auf meinem iPhone 4!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mobile Ansicht: Logo überlappt Content (Tatami-Theme)

Jetzt mitmachen!