Leere Fläche kann ich nicht entfernen

[Khan]

Moin Leute,

ich habe da eine Responsive Seite und sobald ich auf einem Mobilgerät Querformat mache, dann erscheint in dort eine leere Fläche und ich bekomme die nicht entfernt. Dieser Bereich ist mit CSS und einer JS Datei bestückt und in der JS befinden sich auch einige CSS Befehle. Alles ist recht überschaubar aber ich konnte es nicht lösen, vielleicht hat jemand eine Idee.

[MudGuard]

Hi,

ich habe da eine Responsive Seite und sobald ich auf einem Mobilgerät Querformat mache, dann erscheint in dort eine leere Fläche und ich bekomme die nicht entfernt. Dieser Bereich ist mit CSS und einer JS Datei bestückt und in der JS befinden sich auch einige CSS Befehle. Alles ist recht überschaubar aber ich konnte es nicht lösen, vielleicht hat jemand eine Idee.

Das Problem befindet sich in Zeile 17 im Quellcode. Oder in Zeile 42.

Oder sonst irgendwo.

Wie soll man anhand eines Screenshots erkennen, wo im Code das Problem versteckt ist?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Khan,

zusätzlich zum Link auf die Seite wäre noch wichtig zu wissen: Welche leere Fläche stört genau - welches Aussehen ERWARTEST Du? Kannst Du den störenden Bereich irgendwie markieren?

Rolf

[Khan]

Blöd beschrieben von mir aber ich sag mal so, es soll so aussehen:

Aber der jetzige Bereich rechts von der Schrift ist mit irgendeinem Code besetzt und welchen Code soll ich da posten wenn ich nicht weiss welcher das ist? Und da sind mehrere Klassen verwiesen und dazu eine JS Datei.

http://mediterran-halstenbek.de/neu/#gallery

Ist nur in der Mobilansicht so!

[Khan]

Mobil aber auch nur wenn Querformat. Also z. B. Telefon horizontal.

[Rolf B]

Hallo Khan,

grundsätzlich sehe ich das Problem hier (neu/css/style.css:1585):

@media (max-width: 991px)
style.css:1585
.portfolio-grids {
    width: 45%;
    float: left;
}

Die Breite von 45% löst den Leerraum aus. Wenn ich Chrome in den "Mobil-Emulationsmodus für iPhone 6" schalte (das macht man in den Entwicklerwerkzeugen oben links, da ist so ein Handy-ähnliches Icon), zeigt er mir eine Breite von 667 CSS-Pixeln an, deswegen greift diese Media-Regel. Ein iPad beispielsweise hat 1024 CSS Pixel, da sieht es richtig aus.

Welchen Usecase hat diese Media-Regel überhaupt? Wann ist es sinnvoll, die Breite von portfolio-grids auf 45% zu setzen? Zeig Dir mal die Seite im Desktop-Browser an und mach langsam das Fenster schmaler. Irgendwann hast Du die 992 Pixel unterschritten, dann schnurrt die Anzeige zusammen, irgendwann unterschreitest Du die nächste Schwelle, dann wird's wieder breit. Ist diese Regel ein Unfall?

Rolf

[Gunnar Bittersmann]

@@Rolf B

@media (max-width: 991px)
style.css:1585
.portfolio-grids {
    width: 45%;
    float: left;
}

Die Breite von 45% löst den Leerraum aus.

Es soll ja nur diese Breite haben. Die andere Deklaration ist die, die stört.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Es soll ja nur diese Breite haben.

Dem Augenschein nach kann ich deiner Annahme nicht folgen. Wenn ich mir die Seite für andere Breiten betrachte, wird eigentlich immer die Viewport-Breite ausgenutzt. Eine Sonderlocke mit 45% Breite für den Breitenbereich 601-990 Pixel erschließt sich mir nicht (und ja, das liegt natürlich daran, dass ich keine Locken mehr habe).

Die andere Deklaration ist die, die stört.

Der float:left stört auch und bewirkt, dass die Preisliste ihre natürliche Breite hat statt der Viewportbreite, da hast Du natürlich recht. Der ist ebenfalls nur in diesem Breitenbereich gesetzt.

Dass man bei diesem am Stiefelriemen aufgehängten CSS-Monster den Überblick verliert, ist aber auch kein Wunder. Und ich frage mich, warum Bootstrap den Speisekartencontainer unbedingt in der Breite springen lassen muss - sich sogar extra Mühe gibt, die Margins anzupassen um das zu erreichen. Warum nicht einfach eine max-width setzen und innerhalb dessen einfach Text und Preis links/rechts ausrichten? Entweder mit float oder mit flexbox, aber ich hätte hier auch keine Skrupel, eine Tabelle einzusetzen. Eine Speisekarte würde ich als tabellarische Daten betrachten wollen, und eine responsive Ansicht bei der irgendwann Name, Preis und Beschreibung untereinander stehen sollten braucht man hier wohl auch nicht.

Rolf

[Gunnar Bittersmann]

@@Khan

Aber der jetzige Bereich rechts von der Schrift ist mit irgendeinem Code besetzt und welchen Code soll ich da posten wenn ich nicht weiss welcher das ist? Und da sind mehrere Klassen verwiesen und dazu eine JS Datei.

Mit dem Entwicklerwerkzeug deines Browsers kannst du umgehen? Wenn nicht, wäre jetzt die Zeit, das zu erlernen.

Bspw. im Firefox: Reiter „Inspektor“, links davon „Ein Element der Seite auswählen anclicken“, dann mit der Maus das betreffende Element suchen. Sieht dann so aus:

Im linken Feld siehst du im DOM (HTML) das betreffende Element. Anclicken. Rechts siehst du dann die CSS-Regeln dafür:

Da siehst du float: left, deshalb steht das Ding links. Haken wegnehmen – steht immer noch links. Jetzt kannst du das Ding aber horizontal zentrieren. Da es ein Block ist bspw. mit margin: auto.

Außerdem siehst du, dass da ein ` ist, das da nicht hingehört. Die Änderungen übernimmst du dann in dein Stylesheet.

LLAP 🖖

[Khan]

Ok Leute ihr habt mir alle sehr geholfen, die Klasse .portfolio-grids war dafür zustaendig bloß habe ich diese nicht eigenstaendig gefunden.

Jetzt ist es so wie ich es mir vorgestellt habe.

Danke und Gruß aus Hamburg!!

[Gunnar Bittersmann]

@@Khan

http://mediterran-halstenbek.de/neu/#gallery

Ein paar Dinge, die du noch berichtigen solltest:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Nutzern das Vergrößern der Seite zu untersagen, ist überhaupt keine gute Idee. (Manche Browser unterstützen das auch gar nicht mehr.) Das muss auf yes gesetzt werden! Oder die user-scalable-Angabe ganz weglassen.

---

.linkEffects a:hover,
.linkEffects a:focus {
	outline: none;
}

Dadurch ist das Menü unbenutzbar. Bei Navigation mit Tastatur erkennt man nicht, bei welchem Menüpunkt man sich befindet. Wenn du den vorhandenen Stil für :focus wegnimmst, musst du einen anderen dafür vorsehen. Aufgrund des (ohnehin zweifelhaften) Hovereffekts ist das etwas tricky, aber .linkEffects li a:focus span { outline: thick solid } erfüllt seinen Zweck.

BTW, den Hovereffekt bei „Speisen“ solltest du dir nochmal genauer ansehen.

---

<input type="text" placeholder="Vorname" name="Vorname" required="">

Nein! Placeholder sind kein Ersatz für Labels! – Wirklich nicht! Sämtliche Eingabefelder benötigen eine Beschriftung.

Vielleicht ist solch ein Label was für dich.

---

Ein Fehler (deshalb in der Quelltextansicht rot hervorgehoben), der sich nicht auf Nutzer auswirkt: Ein Kommentar darf nicht <!-- enthalten.

LLAP 🖖

[MudGuard]

Hi,

Placeholder sind kein Ersatz für Labels!

In letzter Zeit habe ich einige User gesehen, die versucht haben, den Placeholder-Text mit der Maus zu markieren, um ihn löschen zu können. Oder nachdem der Cursor im Eingabefeld war, wiederholt auf die Delete-Taste gedrückt haben, um den Text wegzulöschen, was natürlich nicht funktioniert hat.

Die wollten ja nicht den "vorgegebenen" Text in der Eingabe mit drin haben …

cu,
Andreas a/k/a MudGuard