H1 individuell einstellen

Versuche es mal mit .wpb_text_column h1 {font-size: 90px} im Child (die 90px ist einfach ein Beispiel um es direkt zu sehen)

Jede Seite gibt in der Body Class eine eigene Klasse aus. z.B Home oder page-id etc. Damit kann man einzelne Seiten super ansprechen und steuern. Die Gefahr ist zum Beispiel, wenn man [COLOR=#333333].wpb_text_column h1 {font-size: 90px} in der css speichert, alle h1 in wpb_text_column verändert werden. Entweder gibt man dem Home Container eine eigene extra Klasse, oder man nimmt die body class z.B .home [/COLOR][COLOR=#333333].wpb_text_column h1 {font-size: 90px}. Es kann auch nötig sein, einen css Befehl mit !important zu kennzeichnen. Auf jeden Fall musst du auch die responsive Fähigkeit überprüfen.

Zudem hat deine Seite mehrere H1 Überschriften. Auf einer Seite sollte immer nur eine H1 sein. ( Die wichtigste ) und danach mit h2 weiter gemacht werden.

[/COLOR]

Zitat von mteepee

auf dem iphone sieht es ziemlich aus wie kraut und rüben

Kleiner Tipp: Einfach das Browserfenster kleiner/schmäler machen, dann sieht man das direkt, auch ohne iPhone.

z.B media queries benutzen.

@media screen and (max-width: 990px){
    .wpb_text_column h1 {font-size: 1em;} 
}

Zitat von mteepee

Hat doch nicht geklappt. auf dem iphone sieht es ziemlich aus wie kraut und rüben => null responsive.

Kannst du das etwas konkretisieren? Was heißt denn Kraut und Rüben? Bezieht sich das nur auf die geänderte Überschrift?

Über die Media queries kannst du Regeln anlegen, die sich nur auf bestimmte Bildschirmbreiten auswirken. Wenn du z.b. den "Code" von Strub verwendest, kannst du damit eine Schriftgröße für alle Bildschirme eingeben, die kleiner als 990 px breit sind (also z.B. auch Tablets und dein iPhone).

Sprich, du legst erst eine Schriftgröße fest, die generell gelten soll (so wie du es bisher schon gemacht hast). Das ergänzt du dann um eine andere (vermutlich kleinere) Schriftgröße für kleinere Bildschirme. Dazu verwendest du die Media Queries.