Content fixieren

    Hallo zusammen!
    Ich baue gerade meinen Blog http://www.barbarahoelzl.com auf und lese mich durch viele Forenbeiträge und Wordpress-Hilfestellungen aber ich komm nicht weiter... :(
    Ich hab folgendes Problem:
    Ziehe ich das Browserfenster kleiner, läuft der Text vom Content in die primary-Sidebar und bricht nicht ordentlich. Ebenso hab ich das Problem mit der mobile-Darstellung - dort läuft der Content-Text automatisch in die Sidebar.
    Was muss ich ändern bzw. einstellen?

    Freu mich auf Rückmeldung,
    Babsi

    • 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

    Moin Moin,

    das liegt daran das du #main und der Sidebar eine feste Breite gibst. Du musst diese Werte natürlich für jeden Breakpoint anpassen.

    Du kannst auch deiner Sidebar einfach 19% und #main 80% Breite geben. Das sollte das Problem auch lösen.

    Zum Debuggen empfehle ich: http://www.responsivedesigntest.net/

    Oder die neuste Firefox Beta 16.0, dort kannst du mit STRG+SHIFT+M alle Breakpoints direkt im Browser abklappern, geniales ding. :-)

    Gruß,

    Christian

    Moin! :)

    Ich hab die Sidebar und Main prozentual verändert aber jetzt sieht's noch schlimmer aus als vorher.. *lach*
    Wie pass ich denn den Breakpoint an? *ratlosguck* Sorry, bin ein Neuling was solche Dinge angeht.. *seufz*

    Liebe Grüße,
    Babsi

    Das geht mit Media Queries...

    Code
    @media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (min-width: 320px) and (max-width: 479px) {}
@media only screen and (max-width: 319px) {}

    Als Beispiel

    Code
    @media only screen and (min-width: 768px) and (max-width: 959px) {
#main{width:450px;}
#sidebar{width:200px;}
}

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden