Wordpress Theme 2011 und mein ressponsive Child Theme Problem...

    Hallo zusammen,

    nach einigem hin und her, diverser Videos und Webseiten bin ich nun zum Schluss gekommen einfach mal zu fragen, da ich anscheinend einen Denkfehler habe oder evtl irgend etwas übersehe...

    Ich benutze seit einiger Zeit ein eigenes childtheme vom 2011 Standard Theme. Aktuelles Wordpress mit 3.8.1 dazu und mittlerweile diversen plugins :/

    Da ich erschreckender weise feststellen musste, dass mein kleiner Blog bei mobilen Endgeräten gruselig aussieht dachte ich mir ich gehe das mal an einem Wochenende an und betreibe etwas "Aufräumarbeit".

    Nun komme ich nicht weiter. Meine einfache Idee war das Theme entsprechend der Style.css in meinem child der Auflösung nach anzupassen.
    zB:

    Code
    @media (max-width: 480px) {[INDENT]#secondary {[/INDENT]
[INDENT=2]display: none;[/INDENT]
[INDENT]}
[/INDENT]
}


    um den Bereich Auszublenden und weitere Anpassungen vorzunehmen.
    Wenn ich so etwas im Browser mit Firebug mache funktioniert das - aber mit der Veränderten css nicht
    und ich weiss nicht wirklich weiter....

    Da die Seite wirklich grottig aussieht und ich laut Analytics einen relativ hohen Anteil mobiler Leser habe
    wäre ich für Hilfe wirklich dankbar.

    Die Url natürlich noch:

    http://www.forellensee-angler.de


    Danke vorab!

    • 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

    Zitat von gopalfreak
    Code
    @media (max-width: 480px) {[INDENT]#secondary {[/INDENT]
[INDENT=2]display: none;[/INDENT]
[INDENT]}
[/INDENT]
}


    Der Gedanke erscheint mir erst einmal richtig, nur verdreht.

    Code
    /* Die Breite betraegt hoechstens 480px */


@media (max-width: 480px) {[INDENT]#secondary {[/INDENT]
[INDENT=2]display: none;[/INDENT]
[INDENT]}
[/INDENT]
}

    Habe jetzt nur bei 2012 geschaut.

    Code
    /* Die Breite betraegt mindestens 600px bevor width:100% und float:right */


@media screen and (min-width:600px) {

    Unter dieser Weite halt kein float und somit nebeneinander kein Platz, so das die Sidebar unterhalb eingeblendet wird.

    Hallo Melewo,

    danke schonmal für Deine Antwort zu meinem Problem.

    Ich verstehe schon, dass Du sagst es wäre evtl "falsch herum" und ich habe auch überlegt ob man über min oder max gehen soll, jedoch ist diese Zeile schon im Theme vorgegeben:

    Code
    */@media (max-width: 800px)

    Daher wollte ich sie nur "verändern" um zB die Sidebar komplett auszublenden und den primary content auf die komplette Breite zu ziehen...

    Da 2011 schon responsive ist dachte ich das wäre der einfacherere Weg, zumal als Child könnte das mit dem Haupttheme doch kollidieren oder?

    danke vorab

    Wie geschrieben, ich ging jetzt nur von 2012 aus und das entspricht wohl in diesem Punkt 'Mobile First' und Deine Variante 'Desktop First'.

    http://www.heise.de/developer/arti…en-2123587.html

    Also als Grundversion eine Version, die auf einem kleinen Screen gut angezeigt wird, dann bei einem größeren Screen erst die Sidebar floaten lässt oder allgemein erst als Element anzeigen.

    Deine Variante sollte auch funktionieren, doch dann kommt es mit auf die Reihenfolge an, denke ich mir, was der Browser zuerst liest. Und wenn der erst liest, dass die Sidebar nicht angezeigt werden soll, dann aber irgendwo doch noch eine Regel oder Klasse findet, dass die angezeigt werden soll und auch wie, überschreibt sich das wohl. Hast Du es einmal mit !important hinter none getestet, um dem Wert der Eigenschaft mehr Gewicht zu verleihen?

    Hallo Melewo,

    Danke nochmal - ich habe gestern nochmal etwas herumprobiert und warum auch immer: Es ging nicht (auch nicht mit !important).
    Ich habe mir dann mal das 2012 Theme angesehen und angefangen es dann an mein altes Design als Child anzupassen: das geht deutlich schneller :)
    Und: funktioniert auch...

    Ich bastle dann die nächsten Tage ein wenig rum.
    Mobile First macht es auch noch prinzipiell einfacher nachher die responsive Elemente anzupassen.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden