Header soll sich auf Tablet/Smartphone verkleinern, aber wie?

Quote from Checkaline1988

Hallo,

Ich möchte gerne, dass mein Header sich verkleinert, wenn man es auf dem Smartphone anschaut.
Ich habe es damit versucht:

Media only screen and (min-width: 680px) {
.costum-header {
width: 24%;
height: 100px;
font-size: 1.4em;
}

Aber da passiert garnichts. Vielleicht ist es auch falsch. Bin halt echt total neu und versuche einiges rauszufinden.

Danke LG

Display More

Deine Regel gilt für alle Bildschirmgrößen über 680px. Versuch es mal mit "max-width" statt "min-width".

Ob die darin enthaltene Regel sinnvoll ist, lässt sich aber ohne Link zur Seite schwer beurteilen. "width: 24%" beudetet aber 24% des darüberliegenden bzw. "umklammernden" Elements. Das scheint für einen Header auf den ersten Blick ehrlich gesagt erstmal wenig sinnvoll.

Quote from Checkaline1988

Kann man denn ein Link scicken. Ich glaube nicht. Ich bearbeite das ja nur mit Netbeans. Öffentlich ist es nicht.

Wenn es nicht öffentlich ist, kannst du auch keine Link schicken. Aber ohne Link ist es für uns schwer (bis unmöglich), dir konkrete Hilfe zu leisten. Ohne Link ist halt alles sehr "theoretisch".
Netbeans ist aber nur dein Editor, vermutlich läuft Wordpress dann auf einem lokalen Server wie z.B. XAMPP?

Quote from Checkaline1988

Hab das mal geändert, aber da tut sich nichts. Man kann in Wordpress ja umstellen auf zb Tablet, Smartphone etc und da ist der Header immer zum großen Teil verschwunden.

Wo kann man Wordpress umstellen? Die MediaQueries kannst du eigentlich nicht einstellen, sondern sie "reagieren" auf die Größe des Browser-Fensters. Das heißt, sie werden gültig, wenn dein Browser-Fenster eine bestimmte Größe hat. In deinem Fall, gilt die genannte Regel immer dann, wenn dein Browser-Fenster breiter als 680px ist. Bzw nach meiner Änderung immer dann, wenn das Browser-Fenster schmaler als 680px ist.

Quote from Checkaline1988

Wenn du auf Wordpress -> Customizer gehst, kannst du unten rechts testen ob sich die größen verändern bei kleineren Bildschirmen. Und da verändert sich eben nichts nach den Eingaben. LG

Ah! Lustig, ist mir noch nie aufgefallen. Warum testest du es nicht direkt im Browser? Funktioniert es da auch nicht?

Du hast übrigens auch noch einen Tippfehler. Deine Regel heißt .costum-header. Das Element in Twentyseventeen heißt .custom-header.

Ich weiß, ich hab es schon mal gesagt, aber ich bin etwas (sehr!) überrascht, dass dich bei deinem Praktikum niemand zu betreuen scheint. Ob das so überhaupt Sinn hat?