Seite 1 von 1

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

Verfasst: 25.04.2017 11:33
von 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?

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

Verfasst: 25.04.2017 11:57
von 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

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

Verfasst: 25.04.2017 12:38
von 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?

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

Verfasst: 25.04.2017 12:42
von 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

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

Verfasst: 25.04.2017 12:45
von Lizardx
Cool, danke. Jetzt klappt es endlich! :-)