Zur Navigation

Bilder in Slideshow bei Bildschirmgröße kleiner 480px ausblenden

1 krieger98

Hallo,
Auf der Webseite:
https://www.fahrrad-workshop-sprockhoevel.de/mtb-trekkingrad-workshop.htm gibt es eine Slideshow.
Die Show möchte ich bei einer Bildschirmgröße kleiner 480 px ausblenden.
In der CSS responsive-1.css habe ich eingefügt:
@media(max-width:480px)
.slideshow-container {
display: none;}

Die Sildeshow beginnt mit <div class="slideshow-container">
Leider klappt das nicht mit dem ausblenden !!!
Woran liegt das ??

14.02.2021 17:37 | geändert: 14.02.2021 17:39

2 Käptn Blaubär

Hallo,

Woran liegt das ??

Am fehlenden geschweiften Klammerpaar hinter der Medienabfrage.

Dieser Fehler müßte Dir bekannt vorkommen ;-)

14.02.2021 20:56

4 Jörg

Mit Rechtsklick auf einen Kreis und "Untersuchen" wird in den Entwicklertools des Browsers das HTML und CSS angezeigt:

<div style="text-align: center"><span class="dot"></span></div>

.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

Gehören die Kreise vielleicht zum darüberliegenden Slider?

16.02.2021 10:29 | geändert: 16.02.2021 10:31

5 krieger98

[quote=Jörg]Mit Rechtsklick auf einen Kreis und "Untersuchen" wird in den Entwicklertools des Browsers das HTML und CSS angezeigt:

<div style="text-align: center"><span class="dot"></span></div>

.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

Die Kreise müssten eigentlich entstehen hier:
<div style="text-align: center">
<span class="dot"></span></div>
<div style="text-align: center">
<span class="dot"></span></div>
<div style="text-align: center">
<span class="dot"></span></div>
<div style="text-align: center">
<span class="dot"></span></div>
<div style="text-align: center">
<span class="dot"></span></div>
<br>
<div style="text-align: center">
<span class="dot"></span></div>






16.02.2021 11:25

6 Jörg

Ja, genau darauf verweist der Inspektor von Firefox.

Wenn die Kreise (vom Slider?) nicht benötigt werden, kann das HTML samt zugehörigem CSS entfernt werden. Andernfalls können diese auch mit "display: none" unterhalb einer Bildschirmbreite von 480px ausgeblendet werden.

@media (max-width:480px) {
  .dot {
    display: none;
  }
}

16.02.2021 15:44

7 krieger98

Zitat von Jörg
Ja, genau darauf verweist der Inspektor von Firefox.

Wenn die Kreise (vom Slider?) nicht benötigt werden, kann das HTML samt zugehörigem CSS entfernt werden. Andernfalls können diese auch mit "display: none" unterhalb einer Bildschirmbreite von 480px ausgeblendet werden.

@media (max-width:480px) {
  .dot {
    display: none;
  }
}

Danke !!!

16.02.2021 17:50

8 krieger98

Hallo,
Habe den Code in der Css unter kleiner Bildschirmgröße 480px eingefügt.
.dot {
display: none;
}


Hat aber nichts gebracht, die Kreise werden immer noch angezeigt.

16.02.2021 19:40

9 Käptn Blaubär

Habe den Code in der Css unter kleiner Bildschirmgröße 480px eingefügt.
.dot {
display: none;
}
Ich kann ihn nicht sehen.

16.02.2021 20:01

10 Jörg

Es gibt zwei CSS-Dateien mit jeweils einer Definition von display für .dot. Der Eintrag in der responsive-workshop1.css überschreibt den vorhergehenden in der responsive-1.css:

   .dot {
        height: 13px;
        width: 13px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

... d.h. "none" wird hier durch "inline-block" überschrieben

16.02.2021 20:28 | geändert: 16.02.2021 20:30