Custom CSS zum Ausblenden der Sidebar? [Fabulous Fluid Theme]

  • Einen wunderschönen guten Morgen! :)
    Ich bin gerade dabei meine Seite mit dem Fabulous Fluid Theme auch für den Mobil-Bereich ein wenig zu optimieren, da dieses Theme da zum Teil doch recht unoptimiert ist.
    Soweit ganz glücklich geworden und begeistert bin ich dabei mit dem "Mobile Menu Options" Plugin.
    Damit habe ich bereits für die Mobile Ansicht das Menü anpassen können sowie den Slider ausblenden können, und wodurch es in meinen Augen fast perfekt ist.

    Nur an einem Punkt hakt es noch: Sidebar! Diese würde ich ebenfalls in der Mobile-Ansicht ausblenden.
    Ich habe es zwar geschafft, die Sidebar auszublenden indem ich .widget ins "Hide Elements" Feld des Plugins geschrieben habe.
    Das ist aber eher Semi-Effektiv, denn nun ist die Sidebar zwar nicht mehr zu sehen, aber dennoch ist der eigentliche Content immer noch so zusammen geschoben wie mit Sidebar, es wird also dennoch nicht die komplette Seite genutzt.
    Ich habe nun schon einiges probiert, aber ohne Erfolg. Das Plugin besitzt auch ein "Custom CSS"-Feld, mit dem sich das ganze sicher regeln lässt. Man muss nur wissen wie - meine Versuche waren bisher erfolglos. Hat hier vielleicht jemand einen Rat?

    • 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

  • Achso ja natürlich :)
    Zu der aktuellen Baustellen-Website die aktuell als Testfeld dient kommt ihr hier :)

  • Derzeit sind für den Hauptbereich und der Seitenleiste definiert:

    Code
    #primary {
        float: left;
        max-width: 880px;
        width: 72.132%;
    }

    und

    Code
    #secondary {
        float: right;
        max-width: 340px;
        width: 27.862%;
    }

    Für ein responsives Webdesign müsstest Du die Bereiche mit Media Queries anpassen. Informationen dazu findest Du unter

    https://wiki.selfhtml.org/wiki/CSS/Media_Queries

    http://www.intensivstation.ch/css3/media-queries/
    Je nachdem, was Du machen möchtest, kannst Du die Seitenleiste auf Tablets und/oder Smartphones unter dem Hauptbereich anzeigen oder ausblenden.

  • Vielen Dank, dass hat mir schon sehr weiter geholfen! :)

Jetzt mitmachen!

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