Html-Navigation wird auf Smartphone/Tablet nicht angezeigt

html.de-Forum HTML, XHTML & CSS
1

Hallo Community,
ich bin Künstler und habe auf meiner 1&1-Website jeweils am Fuße meiner 36 Themenkapitel eine Pfeilsteuerung
mit drei Buttons (KapitelAufwärts-Links/Kapitelanfang-Oben/KapitelAbwärts-Rechts) als Verbindungsnavigation
eingefügt. Der ganze Html-Code ist als Widget einfügt. Die 3 Pfeil-Pngs sind bei Photobucket upgeloadet.
Auf Laptop und PC wird alles einwandfrei dargestellt z.B.
http://www.wolfsbrut.com/produktionen/televisionen-vom-glaubensarsenal-3/
in diesem Kapitel. Auf Smartphone und Tablet erscheinen diese nicht, auch nach Cookies-cleaning usw.
Gibt es einen Fehler im Code bzw. welche Befehle müssten noch eingefügt werden, damit alles überall angezeigt wird ?

Vielen Dank schon mal im Voraus für die Hilfe !

[code=HTML]

Pfeil Links Pfeil Oben Pfeil Rechts
[/code]
2

Auszug aus dem CSS:

@media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }

Bedeutet: bis 1024px wird die Anzeige von .mediumScreenDisabled unterdrückt, die im weiteren Verlauf des Codes für die kleinen Displays nicht wieder aufgehoben wird.

Und in dieser Klasse ist der gezeigte Code enthalten.

[SIZE=3]Moderation: Von HTML nach CSS verschoben.[/SIZE]

3

Hallo Moderator,
sehr aufschlussreich, aber wie und an welchen Plätzen soll ich die angegebenen Befehle verwenden ?
Grüße.

Sorry, funktioniert nicht. Zum Beispiel hier mal eingefügt :
http://www.wolfsbrut.com/produktionen/televisionen-vom-glaubensarsenal-3/
Handy/Tablet-Test negativ.

4

Was hast Du wo eingefügt? In den Media Queries entdecke ich zumindest keinen Unterschied.

Welche Rolle spielen denn die beiden Klassen .mobilepreview u. .smallScreenDisabled, die im weiteren Verlauf des HTML-Code überhaupt nicht auftauchen?

Kommen sie vielleicht erst bei den mobilen Geräten (dynamisch) ins Spiel?

Vielleicht ist Dir dann schon damit geholfen?

/* Dein letztes Media Query */ @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } /* Ergänzung */ .mobilepreview .mediumScreenDisabled { display:block } }