Responsive HTML-Website: In mobiler Ansicht sind Links nicht funktionfsähig

[SuRa]

Auf den letzten Drücker vor meiner Vernissage wurde meine neue Homepage fertig: www.susanne-rauh-fotografie.de
Ich habe sie ganz klassisch mit einem Template von onmouseover in HTML erstellt.
Es ist auch alles ok, auch weitgehend responsive (bis auf die eingebetteten Bildergalerien, die mit Visual LightBox erstellt wurden).
Mit den gängigen Browsern am PC funktioniert meine Website einwandfrei.
Erst als ich die Website auf dem Smartphone getestet habe, fiel mir auf, dass die normalen Links im Text nicht funktionieren. Es sieht so aus, als würde eine hellgraue Ebene über der Seite liegen.
Mit Testtools kann man es nachvollziehen: http://www.responsinator.com/ (z. B. auf der Seite "Aktuelles")
Leider reichen meine HTML-Kenntnisse reichen nicht aus, um den Fehler zu analysieren und zu beheben.
Kann jemand den Fehler finden? Zu viele <div>-Tags? Ich wäre sehr dankar, zumindest in welche Richtung der Fehelr gehen könnte.
Grüße
Susanne
P. S.: Ich habe dann mal das unberührte Template hochgeladen. Dort ist der Fehler auch vorhanden, d. h. herstellerseits. Der Hersteller gibt aber keinen Support.

 

[scatello]

Das ist ein CSS-Problem:

#menu1 {
  display: table;
  POSITION: fixed;
  POSITION: fixed;
  z-index: 0;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 1s;
}

Durch die Höhe von 100% wird die komplette Seite von dem div überdeckt.

 

[Sempervivum]

Da muss man erst Mal drauf kommen, der Hersteller hat etwas nicht bedacht: In der mobilen Ansicht überdeckt das Menü das ganze Browserfenster, auch wenn es nicht sichtbar ist, denn es wird mit "opacity: 0;" unsichtbar gemacht. Insofern war deine Vermutung genau richtig, dass da eine Ebene darüber liegt.
Lösung indem Du "pointer-events: none;" auf das Menü anwendest, natürlich nur wenn es unsichtbar ist. Das macht es durchlässig für Mausaktionen und die Links funktionieren.

input#open-menue:not(:checked)~#menu1 {
    pointer-events: none;
}

 

[SuRa]

Vielen Dank für die Tipps! ich werde mal versuchen, ob ich es damit reparieren kann.

 

[SuRa]

Das ist ein CSS-Problem:

#menu1 {
  display: table;
  POSITION: fixed;
  POSITION: fixed;
  z-index: 0;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 1s;
}

Durch die Höhe von 100% wird die komplette Seite von dem div überdeckt.

Hallo Scatello,
vielen Dank, dieser Tipp hat bei mir funktioniert. Ich habe bei height und width 25 statt 100 % eingegeben und jetzt funktionieren die Links in der mobilen Ansicht.
Grüße
SuRa

 

[SuRa]

Da muss man erst Mal drauf kommen, der Hersteller hat etwas nicht bedacht: In der mobilen Ansicht überdeckt das Menü das ganze Browserfenster, auch wenn es nicht sichtbar ist, denn es wird mit "opacity: 0;" unsichtbar gemacht. Insofern war deine Vermutung genau richtig, dass da eine Ebene darüber liegt.
Lösung indem Du "pointer-events: none;" auf das Menü anwendest, natürlich nur wenn es unsichtbar ist. Das macht es durchlässig für Mausaktionen und die Links funktionieren.

input#open-menue:not(:checked)~#menu1 {
    pointer-events: none;
}

Hallo Sempervivum,
diese Lösung hat bei mir leider nicht funktioniert. Danach konnte ich auch im mobilen Menü keinen Link mehr anklicken.
Grüße
SuRa