CSS Oxygen Layout zerschossen bei Verkleinerung browserfenster

  • Hallo,
    ich bitte jetzt hier das erste Mal direkt um Rat, habe aber schon jede Menge hilfreiche Tipps im Forum gefunden. Danke dafür!

    Ich arbeite zum erstem Mal mit wordpress und erstelle überhaupt zum ersten Mal eine eigene website. Das für Euch zur Info.

    Die website ist für eine gemeinnützige Organisation, den Link kann ich leider nicht posten, da ich noch via lokalem Server arbeite. Ich habe in der CSS einges verändert und dbei wahrscheinlich auch viel falsch gemacht. Eine Sache jedenfalls ist mir jetzt aufgefallen, wenn ich das browserfenster verkleinere (firefox und safari) verrutscht das Layout der Seite. Heißt der featured Slider und die primary menu verschieben sich nach rechts. Die header sidebar, die ich durch margin-left nach rechts gerückt habe, verrutscht ebenfalls. Lasse ich die margin weg, ist alles gut. Der Slider soll aber mittig sein und das menu entsprechedn zentriert darüber laufen. Auch, wenn ich padding statt margins setzte, verschieben sich die container. Wie kann ich den den Slider und das menu und die header sidebar denn mit dem wrap so verknüpfen, das sich die komplette Ansicht der Seite proportional zum Browserfenster anpasst?
    Außerdem verändert sich der header in der Höhe, wenn ich das browserfenster vertikal verkleinere. Das verstehe ich gar nicht.

    Falls mir zumindest jemand sagen kann, ob die Behebung des Problems einfach ist, oder, ob es zeitaufwendig ist und jemanden erfordert, der sich gut mit so was auskennt. Danke jedenfalls schonmal für jede Hilfe!

    Grüße,
    Miriam

    • 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

  • Hallo Miriam

    ohne Link ist es schwer dir fundiert zu helfen. Ich kann dir nur ganz allgemein raten Zentrierungen via:

    Code
    #DIV {margin: 0 auto;}


    zu machen. Dann sollten selbige in kleineren Browserfenstern nicht nach rechts "verrutschen".

    LG, pixselig

  • Hallo Pixelig,

    danke für Deine Antwort. Ich versuche mal, die CSS als Anhang hochzuladen.
    CSS.pdf.zip
    Ging leider nur als zip, da sonst zu groß.

    Muss ich das jedem Container einzeln zufügen oder wo in der CSS kommt das genau hin? Ich verstehe den Aufbau der CSS nur teilweise, ehrlich gesagt.

    Danke und LG,
    Miriam

  • Tja Miriam

    so leid es mir tut - wie gesagt genau helfen kann ich dir nicht. Ich weiss nicht was du geändert hast, ich weiss nicht wie das Problem jetzt aussieht und welche Elemente es betrift.
    Nur so beim drübersehen:
    #menu-primary scheinst du ja mit einem "margin-left: 180px;" versehen zu haben (sehe ich daran das direkt darüber der linke margin eh schon definiert war) um das Menü weiter nach rechts zu schieben (vermutlich war es dann bei deinem grösseren Bildschirm zentriert). und dieser Margin sorgt bei kleineren Viewports für eine verrückte Ansicht -> das musst du ändern. Zum Zentrieren wie gesagt meine obige Art wählen. Weiters kommt hinzu, dass das Menü ein "float: left;" besitz -> dadurch kann es sein das meine Zenrtierungsmethode nicht funktioniert. in diesem fall musst du das "float: left;" durch ein "display: inline-block" ersetzen und eventuell den Dokumentenfluss anpassen.

    Du siehst schon, es ist nicht so einfach. Wirklich helfen kann ich dir nur mit einem Link.

    LG, pixselig

Jetzt mitmachen!

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