Praktikant baucht hilfe | Responsive Design | Hochkannt

[Julian]

Hallo,

ich bin Julian, und bin gerade in den letzten Stunden meines Osterpraktikums. Ich habe noch eine letzte Aufgabe an der ich total verzweifele.

Die unter Homepage angegebene URL (sorry ich möchte die URL hier nicht herein schreiben). Hat wenn ich mein Handy hochkannt halte (ob mit CMP oder ohne) die "unerwünschte" Möglichkeit von links nach rechts zu ziehen. Es ist also nicht der gesamte Inhalt sichtbar.

Ich dachte zuerst es wäre der initial-scale=1 , doch wenn ich den ändere ist das Problem nicht behoben.

Ich habe mich (so dachte ich) durch das gesamte Entwicklungstool des Browsers geackert, doch ich finde nicht das die Seitenbreite definiert!?

Bitte helft mir.

Vielen Dank

Julian

[Rolf B]

Hallo Julian,

die Schrift von "Kundendienst" ist zu groß, wie mir scheint.

Mach sie kleiner, bspw. 2.5em, und wenn es denn sein muss, verwende eine Media-Query um sie bei genügend Platz größer zu machen.

Den Rest der Seite kritisiere ich besser nicht - es ist ein Praktikantenwerk und das sieht man ihr an. Aber da dein Praktikum endet, wirst Du keine Chance haben, das Ergebnis noch signifikant zu verbessern.

Rolf

[Julian]

Hallo Rolf,

vielen vielen Dank für deine Hilfe. Die Startseite funktioniert jetzt bei den Unterseiten (siehe Homepage link ) leider nicht? Die H1 scheint hier nicht das Problem zu sein.

Über Kritik freue ich mich sehr, ich kann ja nur besser werden. Gerne alles kritisieren was möglich ist.

Danke Julian

[Rolf B]

Hallo Julian,

ich seh gerade, das scheint ein Wordpress-Machwerk zu sein. Da bist Du für das HTML vermutlich nur zu 10% verantwortlich...

Im Impressum wird - je nach Viewportbreite - das Hersteller-Dropdown vom Inhaltsverzeichnis überlagert. Das liegt daran, dass Du das Inhaltsverzeichnis sticky machst (und zwar gleich doppelt - einmal im scroll-spy-nav Element und in seinem Elternelement auch noch) und ihm einen z-index von 1020 gibst. Viel hilft viel? 1 hätte vermutlich genügt, oder hast Du noch andere z-indexe auf der Seite?

Folge ist jedenfalls, dass das nav Element einen eigenen Stapelkontext bildet und damit über dem Rest der Seite "schwebt", so dass das Dropdown aus dem Header überdeckt wird.

Lösung: gib dem <header> Element position:relative (damit es einen Stapelkontext bildet) und einen z-index, der größer ist als der z-index des Inhaltsverzeichnisses.

Der Bosch-Kundendienst geht kaputt, weil Du einen Link im Text hast, den er nicht umbrechen kann. Wie hab ich das gefunden? Google Chrome, Entwicklerwerkzeuge auf, Viewport-Emulator einschalten (mit Strg+Shift+M). Damit fällt's auf. Der Firefox bricht URLs bei Bedarf am / um, da sieht man das nicht!

URLs im Klartext auszugeben ist immer so eine Sache. "Eine URL, super, die tipp ich ab!" - kein Anwender, jemals. Das sollte ein echter Link sein (meinetwegen mit rel="nofollow") und einem kurzen, klaren Text. Und schon ist das Problem gelöst. Wenn ein Anwender den Link unbedingt kopieren will, kann sie auf einem PC mit rechts klicken und "Link kopieren" - auf einem Touchgerät geht das normalerweise mit einem Long-Touch.

Also bspw. so:

<p>Text text text</p>
<ul>
<li><a href="https://www.bosch-home.com/de/service/tipps-antworten/service-tipps.html">Bosch Servicetipps</a></li>
<li><a href="https://www.bosch-home.com/de/service/tipps-antworten/allgemeine-fragen-und-antworten.html">Bosch Allgemeine Fragen und Antworten</a></li>
</ul>

Liste? Ja, Liste. Weil es eine ist. Dann brauchst Du auch keine <br> Umbrüche. Mach das konsistent bei allen Links, die unter den Abschnitten stehen. Das P Element vorher schließen? Ja, muss so, weil eine Liste in einem <p> nicht erlaubt ist. Wenn Dir der list-style-type:disc (der schwarze Blob) nicht gefällt, nimm circle oder square oder "▸ ". Ja, ein Freistil-String. Unterstützen mittlerweile alle Browser. Das kleine schwarze Dreieck ist das Unicode-Zeichen U+25B8, es gibt unendlich viele geometrische Formen zur Auswahl.

Wenn's denn unbedingt eine URL als Klartext als Linktext sein muss: Leg trotzdem einen Link drumherum, damit man draufklicken kann, und setze auf solchen a Elementen die CSS Eigenschaft word-break:break-all (bspw. mittels einer Klasse "url-link").

Vermutlich ist das jetzt alles zu spät - du scheinst eine Menge Content zu haben (der vermutlich von irgendwoher zusammengeneriert ist), aber anders wird's nichts werden. Die brutale Methode wäre overflow:hidden für die p Elemente, dann zerreißt es das Layout nicht, aber die URLs werden auch abgeschnitten. Dann besser scrollen…

Rolf

[TS]

Hello Rolf,

alle Achtung! Du kannst ja richtig gut erklären.

Wenn Du willst ;-P

Glück Auf
Tom vom Berg

[Rolf B]

Hallo Julian,

zum Problem der ausbrechenden URLs hat auch der bekannte CSS Trickser Chris Coyier etwas geschrieben.

Rolf

[Julian]

Hallo Rolf,

noch einmal vielen, vielen Dank für deine Hilfe. Ich habe berade bei Bootstrap entdeckt, das es genau die Funktion schon gibt: https://getbootstrap.com/docs/5.0/utilities/text/#word-break Ohne deine Hilfe wäre ich noch nicht einmal auf die Problemursache gekommen.

Ich habe es gerade umgesetzt (Sitze noch bei Pizza und Cola im Büro). Der Ausbildungsvertrag liegt auf dem Tisch, ob das ohne dich geklappt hätte? Bei mir hast du einen Stein im Brett.

Danke nochmals

Julian

[Rolf B]

Hallo Julian,

na dann, herzlichen Glückwunsch.

Der Nachteil an der Sache ist, dass du die Seite betreuen darfst, wenn du in dem laden bleibst 😉

Rolf

[Der Martin]

Hallo,

Der Nachteil an der Sache ist, dass du die Seite betreuen darfst, wenn du in dem laden bleibst 😉

je nachdem, welche Erwartungshaltung dahintersteht, kann er das als lästige Schikane oder als spannende Herausforderung sehen.

Einen schönen Tag noch
 Martin

[Samuel fiedler]

Hallo Der Martin!

je nachdem, welche Erwartungshaltung dahintersteht, kann er das als lästige Schikane oder als spannende Herausforderung sehen.

Ich schätze, man müsste ca. 30% - 50% aller Beiträge dieses Forums in der Zitatesammlung verewigen …

Au revoir,
Samuel Fiedler

[Gunnar Bittersmann]

@@Samuel fiedler

Ich schätze, man müsste ca. 30% - 50% aller Beiträge dieses Forums in der Zitatesammlung verewigen …

Gibt’s schon. Nennt sich Archiv. 😉

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo Gunnar,

Ich schätze, man müsste ca. 30% - 50% aller Beiträge dieses Forums in der Zitatesammlung verewigen …

Gibt’s schon. Nennt sich Archiv. 😉

seit einigen Jahren wird ja pauschal alles archiviert, sofern ein Beitrag nicht durch einen Moderator explizit davon ausgenommen wird. Insofern bildet das Archiv ja keine 30..50% ab, und schon gar keine Auslese (Matthias Apsel hatte sowas mal angeregt).

Aber irgendwann in grauer Vorzeit (10 Jahre oder mehr) musste man tatsächlich noch dafür voten, dass ein Beitrag archiviert wurde. Da hätte dein Konter so richtig sauber gepasst.

Einen schönen Tag noch
 Martin