Monika - Schlauklug ;-) : Bootstrap - Float Probleme mit Text

problematische Seite

Hallo,

unser Entwickler hat Urlaub nun versuche ich mich mit meinen Rudimentären HTML und CSS Kenntnissen an einem Bootstrap/Denk Problem. Für das Design nutzen wir Bootstrap als Responsive Design und ich teste gerade unser neues Design durch (wird nur auf der verlinkten Seite ausgespielt). Bei der Ansicht des iPhone6 (siehe Link) oder iPhone6plus ( http://quirktools.com/screenfly/#u=http%3A//traum-deutung.de/blumen/&w=414&h=736&a=37 ) quetscht sich unschön der Inhalt links neben die Sidebar.

Eigentlich sollte bis 460px die Sidebar (Inhaltsverzeichnis und Ähnliche Artikel) 100 % der Fläche nutzen. Und sich dann ab 460px wieder auf 300px verkleinern (dann ist der Inhalt daneben auch wieder lesbar).

Ist das jetzt eine Aufgabe für jquery?

if (window.innerWidth < 460 ) {

ich bin da leider nicht so bewandert, habe aber gesehen das wir das mit den Werbeplätzen auch so machen.

if (window.innerWidth < 768 ) { 
...
}else{
...
}

Wie könnte soetwas aussehen?

Eine "RATLOSE" Monkia sagt schon einmal danke fürs lesen.

Monika

  1. problematische Seite

    @@Monika - Schlauklug ;-)

    Eigentlich sollte bis 460px die Sidebar (Inhaltsverzeichnis und Ähnliche Artikel) 100 % der Fläche nutzen. Und sich dann ab 460px wieder auf 300px verkleinern (dann ist der Inhalt daneben auch wieder lesbar).

    Ist das jetzt eine Aufgabe für jquery?

    Nein. Styling ist nie™ eine Aufgabe für JavaScript[1].

    Styling ist eine Aufgabe für CSS. Das hier ist eine Aufgabe für Media-Queries. Bootcrap stellt dafür spezielle präsentationsbezogenen Klassen bereit.

    Dass präsentationsbezogenes Markup doof ist, steht auf einem anderen Blatt.

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

    1. außer man weiß genau, was man tut ↩︎