[3.2] Wie Bestimmte Grafiken nur für Desktop User anzeigen

[Lizardx]

Hallo,

ich möchte, dass bei bestimmten Grafiken unterschieden wird zwischen Desktop und Smartphone Usern. Wenn ein Smartphone-User das Forum aufruft, soll er eine andere Grafik zu sehen bekommen wie ein Desktop User. Ich habe dazu in der responsive.css diesen Code hinzugefügt:

Code: Alles auswählen

/* MOBILE */
ad-desktop {
	display: none !important;
}

ad-mobile {
	display: block !important;
}

/* Desktop*/
@media (min-width: 500px) {
	ad-mobile {
		display: none !important;
	}

	ad-desktop {
		display: block !important;
	}
}

In die overall_header.html habe ich diesen Code eingebaut:

Code: Alles auswählen

<div class="ad-mobile">
m
</div>
<div class="ad-desktop">
d
</div>

Bei diesem Beispiel sollen also nur Desktop User den Buchstaben "d" zu sehen bekommen und nur die mobilen User den Buchstaben "m".

Doch leider klappt dieser Code nicht. Kann mir jemand sagen wo der Fehler liegt? Bei diesem Code werden immer beide Buchstaben angezeigt, egal ob per Smartphone oder Desktop.

Mein testforum:*

Kann jemand helfen?

[Crizzo]

Hi.

deine CSS-Selektoren sind verkehrt. Klassen werden mit einem führenden Punkt angesprochen.

Ansonsten bietet es sich vielleicht an, dass du nur die Eigenschaften eines divs per CSS für Mobile anpasst. Dann ersparst du dir zweimal ähnlichen Content übertragen zu müssen.

Grüße

[Lizardx]

Hi Crizzo,

sorry, habe von CSS überhaupt keine Ahnung... meinst du also so:

Code: Alles auswählen

/* MOBILE */
.ad-desktop {
	display: none !important;
}

.ad-mobile {
	display: block !important;
}

/* Desktop*/
@media (min-width: 500px) {
	.ad-mobile {
		display: none !important;
	}

	.ad-desktop {
		display: block !important;
	}
}
	

Das hat leider keine Auswirkungen... gibt es noch einen anderen fehler?

[Mahony]

Hallo
Das funktioniert doch. Ich sehe in der Desktop-Auflösung ein d und in der mobilen Auflösung ein m
Lösche mal deinen Browser-Cache.

Grüße: Mahony

[Lizardx]

Cool, danke. Jetzt klappt es endlich!