Responsives Verhalten im Main Content Bereich des Twenty Eleven Themes

    Hallo zusammen,

    verwende das Twenty Eleven Theme mit einspaltigem Layout, ohne Sidebar.

    Ich möchte im Main Content Bereich 5 Bereiche anlegen -
    dreispaltig oben und zweispaltig unten.
    Die 5 Bereiche sollen sich auf den mobilen Geräten wie bspw. iPad sowie iPhone in definierter Reihenfolge anordnen, Textgrösse soll dabei gleich groß bleiben, Bilder verkleinert werden.

    Wie kann man das bewerkstelligen?

    • 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

    Ich würde mir ein Theme suchen, das meinen Vorstellungen am nächsten kommt und es dementsprechend bearbeiten (basteln!?) oder Du läßt Dir eins vom Profi machen.

    Mir passt Twenty Eleven ganz gut und es ist ja bereits responsive.
    Dachte, dass die 5 Bereiche im einspaltigem Layout recht einfach zu implementieren sind.
    Hoffe, noch andere, evtl. konkretere Vorschläge zu erhalten.

    für eine vernünftige Schriftgröße sollte dieses meta-Tag in der header.php eingebunden werden:

    PHP
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    Schriftgrößen sollten alle relativ sein, d.h. entweder Prozent oder em. Pixel ist als Maßeinheit für die Schriftgröße nach wie vor ungeeignet.

    In der style.css legst du die media-queries an, damit das Layout auf verschiedene Ausgabegeräte reagiert z.B.:

    PHP
    @media only screen and (max-width:30em)  {
.....................................
}


@media only screen and (max-width:50em)  {
.....................................
}

    30em=480px, 50em=800px

    Da wo die Punkte sind legst du die Anweisungen für die entspr. Bildschirmgröße ab.

    Um das Layout zu linearisieren werden zumindest für die 30em die floats entfernt und die Breite der meisten Container auf width:auto; gesetzt. Große HG-Bilder werden oft entfernt, um horizontales scrollen zu vermeiden. Als fallback hat man ja i.d.R. eine HG-Farbe definiert. ;)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden