Frage Html-Navigation wird auf Smartphone/Tablet nicht angezeigt

[Wuddy]

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 !

<div align="center">
<table>
<tr>
<td align="center"><a href="[URL]http://www.wolfsbrut.com/produktionen/televisionen-vom-glaubensarsenal-4/[/URL]">
<img src="[URL='http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil%20Links%202016_zpsabfglnq9.png']http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil Links 2016_zpsabfglnq9.png[/URL]" width="80" height="80" border="0" alt="Pfeil Links">
<td align="center"><a href="[URL]http://www.wolfsbrut.com/produktionen/televisionen-vom-glaubensarsenal-3/[/URL]">
<img src="[URL='http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil%20Oben%202016_zpsv2ltkuzx.png']http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil Oben 2016_zpsv2ltkuzx.png[/URL]" width="80" height="80" border="0" alt="Pfeil Oben">
<td align="center"><a href="[URL]http://www.wolfsbrut.com/produktionen/televisionen-vom-glaubensarsenal-2/[/URL]">
<img src="[URL='http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil%20Rechts%202016_zpsz3sh02c9.png']http://i255.photobucket.com/albums/hh125/cxmller/Skippfeile/Skip-Pfeil Rechts 2016_zpsz3sh02c9.png[/URL]" width="80" height="80" border="0" alt="Pfeil Rechts">
</td>
</tr>
</table>
</div>

 

[SpiceLab]

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 ?

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.

Moderation: Von HTML nach CSS verschoben.

 

[Wuddy]

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.

 

[SpiceLab]

Sorry, funktioniert nicht. Zum Beispiel hier mal eingefügt :

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 }
}