Website-Anzeige auf Tablets fehlerhaft

  • Hallo,


    ich habe vor einiger Zeit angefangen, mir meine eigene Portfolio-Website zu erstellen und leider noch sehr wenig Erfahrung.


    Ich habe auf meiner website (http://www.aileenkassing.com) vier "Blöcke" (Bilder) nebeneinander, die zu verschiedenen anderen Seiten leiten. Diese sollen auf einem großen/"normalen" Bildschirm nebeneinander angezeigt werden (auf Tablets die eine hohe Auflösung haben wir z.B. auf den neuen iPad Pros, ebenfalls). Auf anderen Tablets mit einer geringeren Auflösung soll es zweispaltig werden (also zwei Bilder nebeneinander und dann die anderen gleichmäßig darunter) und auf dem Handy sollen sie dann alle untereinander sein (also ein Bild pro "Reihe").


    Wenn ich meine website auf "normalen", hochauflösenden Bildschirmen lade, wird alles so anzeigt, wie es soll. Auf Handys ebenfalls.

    Nur bei Tablets habe ich ein Problem. Hochkant wird nur ein Bild pro Reihe angezeigt, wenn man es quer hält zwei. Dabei müssten hochkant auch mindestens zwei angezeigt werden und quer bei den meisten Tablets eher 4. Das iPad Pro, mit dem ich teste, hat eine höhere Auflösung als der Bildschirm meines Computers und trotzdem sehe ich auf meinem Computer 4 Spalten nebeneinander und auf dem iPad nur eine bzw. zwei, je nach dem wie ich es halte... Das kann doch eigentlich gar nicht sein?!


    Hier mein Code:



    Die Angaben unter "min-width" und "max-width" machen überhaupt keinen Sinn mehr, aber ich habe schon sehr viel damit rumgespielt und hatte so die besten Ergebnisse (leider...).

    Ich glaube, ich bin gerade einfach blind und sehe irgendeinen offensichtlichen Fehler nicht.

    Kann mir jemand helfen?


    Vielen Dank!
    Aileen

  • Du meinst für die Breiten-Angaben usw.? Ja, im Responsive Webdesign ist Prozent definitiv eine gute Idee.


    Wichtig: Bei den Media-Query-Angaben natürlich bei Pixeln bleiben. Nicht, dass der TO das falsch verstehst.

  • Interessant, über die CSS pixel wusste ich noch nichts.

    Da Handys anscheinend ja auch auf CSS-Pixeln basieren, kann ich einfach viel kleinere Zahlen nehmen und dann müsste es passen. Ich werde es mal ausprobieren, vielen Dank!

    Und ja, ich muss mich an Prozent gewöhnen ;)

  • Ohne CSS Pixel wäre es sonst schon gar nicht mehr möglich, ohne Weiteres zwischen Desktop und Smartphone zu unterscheiden, da die Geräteauflösung bei Smartphones mittlerweile auch im Desktop-Bereich angekommen ist.


    Full HD ist schließlich bei Smartphones auch schon Standard.

  • Ich habe meinen Code inzwischen angepasst, aber leider ist mein Problem noch nicht behoben.

    Wenn ich meine Seite auf http://www.responsive.cc checke (diverse Smartphones & Tablets), sieht alles so aus wie es soll.

    Öffne ich meine website (aileenkassing.com) allerdings auf einem richtigen Mobilgerät, also z.B. auf meinem Handy oder einem iPad, wird immer der zweispaltige Tabletmodus angezeigt -sowohl auf dem neusten iPad Pro als auch auf meinem Samsung Galaxy A6. Auf einem großen Bildschirm (PC) passt alles.

    Weiß jemand, woran das liegt?



    Mein aktueller Code:

    Code
    /*Smartphone*/@media (min-width: 1px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col {float: left;padding: 0px 14px 14px;}}/*Tablet*/@media (min-width: 600px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col-md-one-half {width: 50%;}}/*Desktop*/@media (min-width: 1020px){body {max-width: 1000px;}.style-logo {float: left;}.style-nav {float: right;}.col-lg-one-third {float: left;padding: 10px 10px 10px 5px;width: 33.333333%;}.col-lg-one-fourth {width: 25%;}}



    bzw. falls der Fehler irgendwo anders liegen kann, hier mein gesamtes CSS:



    Danke für eure Hilfe!

  • Schlicht und ergreifend, weil du ab 600px Breite deine zwei Spalten eingestellt hast.


    Ich fürchte, du hast Media Queries noch nicht ganz verstanden.


    Bei einem Mobile-first-Ansatz nutzt du min-width in den Media Queries und steigerst dich von dem kleinsten Smartphone zum größten Desktop.


    Bei einem Desktop-first-Ansatz nutzt du max-width in den Media Queries und gehst vom größten zum kleinsten Gerät.


    Dein min-width: 1px ist folglich schon mal kompletter Quatsch, da dies eben zu den kleinsten Geräten gehören würde, was eigentlich der Code komplett außerhalb der Media Queries sein sollte.

  • Hallo ailleen,


    sehe gerade, dass Dein CSS geändert wurde. Allerdings ist mir nicht ganz klar was konkret nun responsive auf Deiner Seite sein soll, auch wenn Du Teile davon in CSS so programmiert hast. - Bitte nicht falsch verstehen,- das ist nur meine persönlich Ansicht.


    Ich habe bisher ganz gute Erfahrungen bei Responsive Webdesign mit Prozenten und "em" gemacht. Allerdings sind das auch nur meine 5 cents.


    Ansonsten hat JR Cologne eigentlich alles gesagt was wichtig ist.

Jetzt mitmachen!

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