Elemente auf mobilen Geräten ausblenden

Also ich bräuchte Hilfe, undzwar würde ich gerne wissen wollen wie man Elemente auf mobilen Geräten ausblendet

CSS:
@[Only registered and activated users can see links. Click Here To Register...] only screen and (max-width: 500px) {
#elementid{
display: none; oder visibility: hidden;
}
}

Quote:

Originally Posted by ClonePVP CSS: @[Only registered and activated users can see links. Click Here To Register...] only screen and (max-width: 500px) { #elementid{ display: none; oder visibility: hidden; } }

ok danke hat geklappt!!
und was müsste ich das tun, dass ich an der stelle zB ein Bild einblenden würd

@[Only registered and activated users can see links. Click Here To Register...] only screen and (min-width: 501px) {
#elementid{
display: none;
}
} @[Only registered and activated users can see links. Click Here To Register...] only screen and (max-width: 500px) {
#elementid{
display: inline;
}
}

@[Only registered and activated users can see links. Click Here To Register...] dies könnte man mit
lösen.
Oder du erstellst ein Bild mit einer class z.B. "image-hidden"
Setzt es auf visibility: hidden und bei der gewünschten max-width auf visible

Du könntest aber auch im Vorfeld das Markup dafür erstellen und bestimmte divs in der Desktopversion ausblenden, die du dann in der Mobilen einfach wieder einblendest.

#myElement {
display: none;
}
@[Only registered and activated users can see links. Click Here To Register...] (max-width: 768px) {
#myElement {
display: initial;
}
}


So ist es angepasst auf jedes Element, ob inline, block, table... spielt keine Rolle. Zudem solltest du dich vielleicht etwas mit Frameworks ausseinandersetzen, damit du bei viel Content solche Dinge leichter in den Griff kriegst