Flexbox ist in der iPad Version falsch dargestellt!!!

[Lisa K.]

Hallo zusammen,

es ist im Moment wie zum verzweifeln. Meine Testimonials sind auf dem Laptop und der mobilen Version richtig dargestellt (Screenshot, wie es aussieht anbei.)
Ich mach jetzt schon ewig rum.

JEDOCH: bei der iPad Version sieht es ganz schlimm aus!!! Bitte den Screenshot anschauen.

Wer kann mir helfen???

Die Website hat die Adresse:

www.lisa-kochenburger-design.com

10000 Dank schon mal!

Ganz liebe Grüße
Lisa

 

[tk1234]

es ist im Moment wie zum verzweifeln. Meine Testimonials sind auf dem Laptop und der mobilen Version richtig dargestellt (Screenshot, wie es aussieht anbei.)

Die Breakpoints in den Media-Querys sind falsch gesetzt: es gibt einen Breiten-Bereich innerhalb dessen die Darstellung nicht an die Inhalte angepasst wurde - Und die Darstellung auf deinem iPad fällt wohl genau in den Bereich. Was du aber genau wo umstellen musst, kann ich dir auch nicht sagen: der Code ist eine unlesbare div-Suppe, evtl. lässt sich das irgendwo im verwendeten Programm einstellen?

 

[Lisa K.]

Herzlichen Dank!

Die Queries sind im zusätzlichen CSS Code des Theme. Hier ist ein Screenshot.

Da sind einige drin. Vielleicht auch zu viele und es muss etwas raus?

 

[Lisa K.]

Ich hoffe du kannst es lesen. Ansonsten schicke ich dir es größer nochmals.

 

[tk1234]

Die Queries sind im zusätzlichen CSS Code des Theme. Hier ist ein Screenshot.

Code *immer* als Text posten, niemals als Screenshot!

In dem Bereich der dem Kommentar darüber für Tablets gelten soll, fehlen die entsprechenden Regeln - dort muss angegeben werden wie alles dargestellt werden soll. Bitte aber auch beachten: anhand von irgendwelchen Breitenangaben auf eine bestimmte Geräteklasse zu schließen ist Unsinn, das funktioniert nicht, zudem sind Pixel quasi immer die falsche Einheit.

 

[Lisa K.]

Dankeschön!

Tut mir leid, stimmt, das hatte ich vergessen. Hier ist der Code.

/*** Responsive Styles Tablet Only ***/
@media only screen and (min-device-width: 768px){}

Ich steh' jetzt leider wirklich auf dem Schlauch ...
Was fehlt denn da? Die max. Größe? Was nimmt man denn anstatt Pixel. Was muss ich denn jetzt machen? Ich hab' schon so viel gegoogelt, aber immer nur Pixel-Angaben gefunden.

 

[Lisa K.]

So war es ursprünglich... hatte da wohl etwas gelöscht...

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

 

[tk1234]

Was fehlt denn da? Die max. Größe? Was nimmt man denn anstatt Pixel. Was muss ich denn jetzt machen? Ich hab' schon so viel gegoogelt, aber immer nur Pixel-Angaben gefunden.

Lies die von mir verlinkte Seite weiter, dort steht was statt px verwendet werden sollte (relative Einheiten wie em bzw. rem). Aber ja, der Müll mit den Pixelangaben ist im Internet sehr weit verbreitet.

So war es ursprünglich...

Und was stand da als Regeln innerhalb des media-Blocks? Irgendwie musst du die Elemente eben so anordnen dass sie anständig angezeigt werden. Evtl. wäre es sinnvoll das Layout auf mobile-first umzustellen und alles erstmal für sehr schmale Displays anzuordnen, erst wenn ausreichend Platz ist, werden einzelne Elemente nebeneinander angeordnet - dadurch kann es normalerweise nicht passieren dass einzelne Elemente zu schmal dargestellt werden.

 

[Lisa K.]

Herzllichen Dank!

Das werde ich machen. Heute komme ich nicht mehr dazu. Ich melde mich wieder.