Wie kann ich ein Element im CSS auf mobile Geräten ausblenden?

Hey Leute, ich verwende ein Wordpress Theme, welches grundsätzlich schon auf mobile Devices optimiert ist. Nun habe ich per Editor etwas in den Header hinzugefügt, was jedoch auf mobile Devices nicht gut ausschaut. Ich würde das ganze am liebsten nur auf Desktop PC's anzeigen lassen.

Es gibt bereits einen Style-mobile.css , wo viele Devices vordefiniert sind. Ich denke, darauf könnte ich zugreifen, weiss aber nicht genau wie. Zum Beispiel steht dort :

/* Mobile */
@media handheld, only screen and (max-width: 740px) {

body {
font-size: 14px;
-webkit-text-size-adjust: none;
}

.container{width: 94%;padding:0 3%;}

usw... Freue mich auf Hilfe.

Viele Grüße!

Answer 1

[areaDELme]

ich würde eine eigene css datei für jeden gerätetyp machen:

<link rel="stylesheet" type="text/css" href="styleDesktop.css" media="screen and (min-width: 600px)" />

oder eine css und dann so:



@media (min-width: 950px) {
   /* breite browserfenster */
 }

@media (min-width: 450px) and 
  (max-width: 950px) {
   /* notebooks*/ } 

@media (max-width: 450px) {
     /* mobile geräte */ }

Answer 2

[unhalt]

Suchst du sowas?

{visibility: hidden;}

lg

Comments

[areaDELme]

bzw. "visibility: none;" wenn die anderen elemente aufrücken sollen

[areaDELme]

@areaDELme

meinte natürlich auch display :D

[dirtybobic]

@areaDELme

Ja genau, das suche ich. Nur leider bin ich was CSS angeht ziemlicher Laie. Wie kann ich das in den Header einbauen ohne gleich die ganze Seite nicht anzuzeigen? Und was muss ich konkret schreiben um den Befehl nur bei mobile Devices auszuführen?

LG

[areaDELme]

@dirtybobic

#headerimage {
    /*
          wird immer ausgeführt
    */
}

@media (max-width: 450px) {
     /* 
       alles was hier steht wird nur bis 450px breite ausgeführt
      */ 
      /*z.b.: */

     #headerimage {
          display: none;
     }
}

[areaDELme]

@areaDELme

allerding musst du so die reihenfolge beachten. einfacher ist es ein zweites stylesheet nur für die mobilen "änderungen" einzufügen. dieses wird dann nur geladen wenn du die seite mit dem gerät aufmachst und wenn du das nach dem desktop stylesheet einbindest, dann überschreibt es die anweisungen dort, sofern su dort für das gleiche element andere anweisungen angegeben hast.

du kannst das zweite stylesheet auch nur nach bildschirmbreite einfügen, dann hat man auch auf dem desktop die mobile ansicht, wenn man das fenster klein genug hat.

müsste so funktionieren (habe es bei mir aber anders gelöst):

<link rel="stylesheet" type="text/css" href="stylesheetMobile.css" media="(max-width: 450px)" />

<link rel="stylesheet" type="text/css" href="stylesheetMobile.css" media="handheld" />

[dirtybobic]

@areaDELme

Vielen lieben Dank an alle - es klappt jetzt!! :-)) Ein Folgeproblem hat sich jedoch jetzt ergeben. Ich hatte im Header ein Array von Zitaten, welches auf Mobile Devices nicht richtig angezeigt wurde und nun korrekt ausgeblendet wird. Ich hatte in der Definition des Arrays unter anderem den Befehl "Line-height:1.2" , was dazu geführt hat, dass die Zitate mit weniger Zeilenabstand ästhetischer angezeigt wurden. Nachdem ich nun die Zitate ausgeblendet habe funktioniert merkwürdigerweise der line-height befehl nicht mehr. Das muss ja dann damit zusammenhängen, dass ich nun für das Array eine klasse definiert habe? Könnt ihr euch das erklären?

[unhalt]

Oder wohl eher das hier:

{display: none;}

Das Element hat dann keinerlei einfluss auf die darstellung der website.

lg