Bei Wordpress kann man mit 'Custom CSS' das bestehende CSS beim Laden der Seite nachträglich verändern.

Oftmals ist es so, dass sich Korrekturen, welche sich auf dem Desktop gut machen, auf dem Mobile eher suboptimal daher kommen. Also kann es sinnvoll sein, die nachträglichen Anweisungen nur für den Desktop auszuführen.

Bei Mediaevent und Nakieken gibt es interessante Artikel zum Nachlesen.

Mit folgendem Code kann man die Anweisungen für die unterschiedlichen Displaygrössen eingrenzen.

/* Desktopscreen 992px to ... */
@media screen and (min-width: 992px){
.mobile {display: none !important;}
.no-mobile {display: block !important;}
  /* weiterer Code */
}

/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

Konkret hatte ich nun die Situation, dass ich auf dem Desktop die Überschriften vom Absatz her nach links verschoben habe, was dann auf dem Mobile nicht mehr so gut aussah. Deshalb hab ich mein CSS so angepasst, dass diese Anweisungen auf dem Mobile nicht umgesetzt werden.

h2 { font-family: 'Titan One'; font-size: 1.2em; }
h3 { font-family: 'Titan One'; font-size: 1em; }

@media screen and (min-width: 992px){
  .mobile {display: none !important;}
  .no-mobile {display: block !important;}
  h2 { margin-left: -60px; font-size: 1.5em; }
  h3 { margin-left: -30px; font-size: 1.3em; }
}