Wordpress Logo zu groß (mobil)

    Hallo,

    ich habe ein Problem mit dem Design meiner mobilen Seite.
    Ich nutze Wordpress 4.7.2 und OnePress 1.3.0
    Seite: http://www.hofmanns-pfiffikus.de

    Das Menü ist buggy, wenn man es auf dem Handy aufruft.
    Ich konnte den Fehler lokalisieren und es liegt wohl daran, dass das Logo (im Header) zu groß ist, sodass der Menü Button in die zweite Zeile rutscht.
    Mit Chrome konnte ich sehen, dass das Bild per CSS die id = img trägt und die width auf 100% steht.
    Diese Eigenschaft zu ändern bringt aber leider nichts. Vermutlich muss ich nicht das Image ändern, sondern die Breite der Box außen herum?

    Vielen Dank für Eure Hilfe!

    • Gerade eben
    • Anzeige

    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

    Versuche mal folgendes:

    Code
    .site-branding {
    width: calc(100% - 50px);
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Du machst ein Rechtsklick auf die Navigation und dann Untersuchen. Dein Hamburger hat eine Breite von 35px und einen r. Padding von 15, also zusammen 50px. Mit calc kannst du eben von 100% einen festen Wert abziehen.

    Was heißt zerschossen? Zerschießen kann man viel! :D Was genau stimmt nicht? Hast du eventuell den CSS-Code Fehlerhaft eingebaut, z.B: eine Endung (}) unterbrochen bzw. zwischen rein gesetzt? Such doch einfach mit strg f die klasse: "site-branding" und ersetze die 100% breite mit calc(100% - 50px);. Durch Abzug sollte sich eigentlich deine Desktop-Navi nicht verändern. Sonst setz es so:

    Code
    /* Breakpoint eben auf den Wert einstellen, wo es den alten Fehler gegeben hat bzw. die mob- Nav einsetzt */
@media only screen and (max-width: 480px) {
.site-branding {
    width: calc(100% - 50px);
}
}

    Einmal editiert, zuletzt von rantanplan2000 (27. Januar 2017 um 13:22)

    Ja das "untersuchen" kenne ich. Wie man auf die 50px kommt weiß ich jetzt auch.
    Aber wie bist du auf ".site-branding" gekommen?

    Zerschossen im Sinne von (Desktop): Selbes Problem wie mobil: das Menü ist in die nächste Zeile gerutscht. Impressum soll auf Höhe vom Logo sein.

    Genau so hab ichs in css eingebaut. Strg + f und dann eingefügt ;)

    Deine zweite Lösung funktioniert!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden