Headerprobleme im responsive Design

  • Hallo zusammen,

    meine aktuelle Homepage, erstellt mit Wordpress, verursacht momentan etwas Probleme, wenn ich sie auf dem Handy oder Tabelt aufrufe.
    Ich denke ein Bild ist aussagefähigsten: Link.

    Also wirklich nur der Kopfbereich sieht ein bisschen chaotisch aus. Der Rest passt sich super an.

    Zum Thema responsive Design und CSS-Klassen habe ich versucht mich einzulesen, jedoch bin ich um ehrlich zu sein da ein bisschen überfordert.
    Könnt ihr mir vielleicht grob sagen, was ich ändern muss. Ich erwarte natürlich nicht, dass ihr mir die Arbeit abnehmt. Aber ein paar Tipps zur Vorgehensweise wären super;).

    - Adresse zum Blog: http://www.chili-samen-blog.de
    - WordPress-Version: WordPress 3.9.11
    - Verwendetes Theme: Twenty Twelve / Ich nutze das Plugin "Custom Style CSS"

    Inhalt header.txt:

    Vielen Dank im Voraus und allen Usern einen schönen Abend!

    • 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

  • Deine Wordpress-Version ist gut 2 Jahre alt! Mal ganz abgesehen von dem Sicherheitsrisiko (Wordpress ist das am häufigsten gehackte CMS), gehe ich davon aus, dass du das TwentyTwelve-Theme in den letzten 2 Jahren auch nicht geupdated hast. Mach das bitte zunächst (schon allein aus oben genannten Gründen). Womöglich hat sich dann dein Darstellungsproblem schon von alleine erledigt.

    Und ansonsten: Yepp, für einen Anfänger (nicht wertend gemeint, wir haben alle mal angefangen) ist das Anpassen von Template-Dateien oder das CSS-Formatieren in dem Umfang, wie deine derzeitige Darstellung das erfordern würde, absolut zu viel. Auch mir wäre die Suche nach den notwendigen CSS-Anpassungen (für das derzeitige Darstellungsproblem reichen 1 bis 2 Regeländerungen nicht) zu aufwändig. Deshalb mein Vorschlag: wenn das Update des Themes nicht geholfen hat, schau dich doch mal nach einem neuen Theme um, das mit deinem Menü besser funktioniert. Das Design ist ja nicht besonders komplex und in der Optik gibt es etliche ähnlich gestaltete Themes. Und ein Relaunch nach ein paar Jahren macht ja auch was her.

    Und sorry, dass das nicht die Antwort ist, auf die du gehofft hast...

    Gruß, benraaa

  • Vielen Dank, für deine Antwort Benraaa. Werde jetzt erst einmal das Update durchführen und auch mein Theme aktualisieren. War mir gar nicht aufgefallen, dass meine Version so veraltet ist.

    Vorübergehend habe ich jetzt erst einmal mittels media querie eingestellt, das auf kleinen Bildschirmen die zweite Überschrift nicht angezeigt wird. Dadurch wirkt es schon deutlich kompakter in der mobilen Ansicht.

    Beste Grüße

  • Ok, meine Anerkennung, du hast dir Mühe gegeben. Dann will ich jetzt auch nicht hinten anstehen. In der Tablet-Ansicht ab < 832px hängt der Subtitle noch immer unkontrolliert in der Gegend rum. Setz doch mal einen weiteren Media Query ans Ende deiner CSS (oder schau erst mal, ob es nicht schon einen für 823px gibt):

    CSS
    @media screen and (max-width: 832px) {
      h2.site-description {
           margin-left: 0 !important;
           margin-top: 0 !important;
        }
    }

    Das setzt den Subtitle unter den Title. Weiß aber nicht, ob das Theme-Update das schon anders handhabt...

    Gruß, benraaa

  • Super, jetzt bin ich erst einmal zufrieden. Zumindest bei meinen aktuellen Html+CSS Kentnisse ist das eine gute Lösung.
    Vielen Dank für deine Hilfe!

Jetzt mitmachen!

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