Twenty Twelve Responsive - Sidebar unter die Posts

cousipha

Hallo zusammen,

ich versuche gerade verzweifelt mein Design so hinzubekommen, dass die Sidebar bei der Ansicht auf Smartphones unter den ganzen Blogposts ist. Nach einigem rumwerkeln hatte ich es so, dass sie zwar unten ist aber dafür neben dem Content eine dicke Lücke. Als ich die schließen wollte, war es auch im normalen Design so, dass die Sidebar unten war usw. Jetzt habe ich es erst einmal wieder auf den Ursprungszustand gesetzt.

Kann mir jemand sagen, was ich in der CSS ändern muss, damit die Sidebar im responsive unten ist?

Mein Blog: http://www.vegankitchenbeauty.de

Danke :)

Liebe Grüße,
cousipha

Werbepost

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

SirEctor

Du musst mit media-queries arbeiten. Lies Dich mal ein bisschen zu dem Thema ein:
http://www.heise.de/ix/artikel/Allen-recht-1058764.html
http://www.webmasterpro.de/coding/article…martphones.html

Es gibt noch haufenweise Anleitungen.

gericoach

was ist denn eine "angehende" Studentin? Bin übrigens angehender Bundeskanzler... :)

cousipha

Ich studiere erst ab Oktober, deshalb angehend :D

Ich verstehe die Anleitungen nicht :( Möchte doch nur die Sidebar dann unter den Posts :(

SirEctor

Webdesign kostet halt Zeit. "Mal eben so" verspricht zwar manche Werbung, geht aber in den seltensten Fällen. Du musst Dich damit schon etwas beschäftigen. Gerade das Thema "responsive" ist sehr umpfangreich. Was meinst Du warum es Agenturen für sowas gibt? ;-)

FTtk

Code

/* Responsive Hack */
@media only screen and (max-width: 880px), only screen and (max-device-width: 880px) {
  #container, #content { width: 98%; }
  #sidebar { display: none; }
  #bubble { background: none; height: 32px; margin-top: -24px; position: static; }
  #bubble p { background: none; color: #000000; font-size: 14px; }
}

Das in der style.css sollte genügen. Bin mir nicht ganz sicher, ob das so reicht. Falls nicht sehe ich in meiner style.css noch mal genauer nach.
Wurde bei mir auch so gelöst im Twenty Twelve Child Theme.
Kannst hier ja mal testen: http://xafr.net

cousipha

Das ändert gar nichts tut mir leid :(

cousipha

Ah ich musste die Namen anpassen :P

Aber jetzt verschwindet sie dann ganz, die Sidebar soll ja unter die Posts.

maxe

Zitat von cousipha

Aber jetzt verschwindet sie dann ganz, die Sidebar soll ja unter die Posts.

kein Wunder, display ist ja jetzt auch auf none gesetzt :roll:

Wie sirector schon schreibt, das ist nicht mal eben so auf die Schnelle gemacht, vorallem weil dein Theme schon media-queries drin hat. Die müsstest du ja ändern/anpassen.
Du willst ja nur .site-content und .widget-area ändern, dann würde ich .site-content im media-query einfach nur auf 100% setzen, das sollte erst mal reichen. Die width vom media-query solltest du natürlich auch auf deine Bedürfnisse anpassen.

cousipha

Ich habs mittlerweile hinbekommen, danke :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twenty Twelve Responsive - Sidebar unter die Posts

Jetzt mitmachen!