Eine Headline automatisch an die Bildschirmgröße anpassen!?

Schönen guten Abend,

ich bin neu im Forum und bitte um Verzeihung, falls das Thema hier falsch platziert ist.

Fakten: Wordpress - Gutenberg - Theme Astra

Mein Problem:
Nach einigem Hin und Her habe ich es hinbekommen, dass sich das Headerbild auf meiner Startseite responsive verkleinert. Aber die Headline verkleinert sich sehr stark mit, sodass sie auf dem Smartphone viel zu klein ist.

Auch die Anordnung der Headline ist auch nicht wie gewünscht. Ich habe sie über "Spacing - Padding" zwar auf der Desktop-Version schon verschoben, aber auf Tablet und Smartphone sitzt sie dann natürlich wieder an einer ganz anderen Stelle. Da das Header-Bild ein Gruppenfoto von Personen ist, möchte ich, dass auf Desktop, Tablet und Smartphone es jeweils so ist, dass die Headline unterhalb der Köpfe der Personen platziert ist, damit sie nicht verdeckt sind. Derzeit ist das nur auf der Desktop-Version der Fall, auch den anderen Ansichten ist der Text über den Gesichtern platziert.

Hat jemand Ideen dazu oder Erfahrungen mit diesem Problem und kann mir Tipps geben, auch wenn ich leider keinen Link zur Homepage schicken kann? (sie ist noch nicht online, bzw. im Aufbaumodus).

Vielen Dank vorab!

LG, Nin

Vielen Dank für deine Antwort @SEpp55 ! Den Tipp mit dem Maintenance Mode habe ich gleich umgesetzt und ihn jetzt mal temporär aufgehoben. Also wenn mir jemand helfen mag - bitte, sehr gern! Hier der Link: https://www.lebenskompetenz-forum.com

Das mit den MediaQueries habe ich mir schon mal angeschaut, aber es ist leider sehr schwer für mich, das zu durchblicken...
Auf der Seite eingebaut sind schon diese:

/**fixed Headerbild NICHT bei mobil und tablet
**/
@Media only screen and (max-width: 976px) {

.wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image {

background-attachment: scroll;
}
}

/**Headerbild schrumpfen lassen
**/
@Media only screen and (max-width: 976px){
.post-121 .wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image.uagb-section-mobile-optimization {
margin-top: 40px;
padding-bottom: 0px;
}

.wp-block-uagb-section.uagb-section__wrap.uagb-inner-section-mobile-optimization{
padding-top:0px;
padding-left:5px;
}
}

Vielen Dank im Voraus, falls mir wer hilft. :-)

Dankeschön @SEpp55 ! Leider sehe ich beim CSS-Code nicht, dass sich etwas verändert. Was genau soll er denn bewirken?

Ich habe das mit den Größen jetzt schon etwas besser hinbekommen. Aber leider die Platzierung der Headline immer noch nicht.
Es sieht immer nur am Laptop gut aus, am Handy oder Tablet steht die Headline auf den Gesichtern...

Danke für den Tipp mit Gutenberg! Kann ich das Gutenberg-Plugin also einfach deinstallieren und nur „Ultimate Addons for Gutenberg“ behalten? Ich habe das „Ultimate Addons for Gutenberg“ eigentlich hauptsächlich wegen der Container installiert, weil ich bei meinen Recherchen darauf gestoßen bin, dass man damit wohl Einiges lösen und besser strukturieren kann... Mit den anderen Funktionen habe ich mich noch nicht so beschäftigt, muss ich aber sicher noch tun, das ist mir bewusst.

Oben links in der Ecke meiner Homepage steht ja „Skip to content“. Weißt du, warum das da steht, und wie ich das verhindern kann?

Vielen Dank @SEpp55 ! Ich weiß nur leider nicht, wie ich den CSS-Code genau ändern muss. So?

@Media (max-width: 767px) {
#uagb-adv-heading-36ae7fba-5ac7-450a-9ce9-8adcaec794a4 {
font-size: 28px !important;
text-shadow: 2px 2px 5px #000, -2px -2px 5px #000;
}
#uagb-adv-heading-36ae7fba-5ac7-450a-9ce9-8adcaec794a4 {
font-size: 18px !important;
text-shadow: 2px 2px 5px #000, -2px -2px 5px #000;
}
}

Was meinst du damit genau:

Zitat von SEpp55

und dann das Bild änderst

Meinst du, wenn ich das Bild neu/anders hochlade? Oder auch schon, wenn ich die Abstände ändere?

Ich habe die Verschiebung der Headline jetzt nämlich mittels "Margin"-Abständen grundsätzlich mal so hinbekommen, wie ich es wollte. :-)
Benötige ich deinen CSS-Code jetzt denn dann überhaupt noch, bzw. würdest du mir empfehlen, es dann eh auf allen Seiten über die Abstände zu machen (also über das "Ultimate Adons für Gutenberg"-Plugin), damit sich nichts verschiebt? Was genau bewirkt der Code?

Danke auch für den Hinweis mit dem Foto bei der Teamseite. Dass ein Kopf oben weg ist, ist natürlich nicht so ideal. ;-)
Ich habe jetzt das selbe Bild eingefügt, wie auf der Titelseite und wollte auch hier über die Abstände die Headline je nach Bildschirmgröße anpassen. Aber leider wird mir hier nicht die Möglichkeit angezeigt, die Abstände je nach Bildschirmgröße unterschiedlich festzulegen!?

Was ich auch noch nicht geschafft habe:
- Bei der Tablet-Ansicht ist der türkise/blaue Button jetzt leider über den Subtitle verschoben, da finde ich nicht heraus, über welche Einstellungen/Abstände ich das ändern kann!?
- "Skip to content“: Das wird mir glaube ich nur beim Internet Explorer angezeigt (zumindest bei Firefox sehe ich es nicht). Weißt du, wie ich das verhindern kann?

Dankeschön vorab! :-)

Jetzt ist übrigens auf der Teamseite bei der Handyansicht das Bild wieder an den Seiten abgeschnitten und auch viel höher als gewünscht (bei der Tablet-Ansicht auch). - Achja, immer wenn man an der einen Stelle etwas ändern, ändert sich etwas anders auch. :(

Zitat von Lebenskompetenz11

- Bei der Tablet-Ansicht ist der türkise/blaue Button jetzt leider über den Subtitle verschoben, da finde ich nicht heraus, über welche Einstellungen/Abstände ich das ändern kann!?

Das habe ich nun doch selber lösen können - mit einem Abstandshalter! :-)

@SEpp55 Ja, manchmal ist so ein "Paralleluniversum" nicht schlecht, weil unterschiedliche Leute verschieden helfen können. Geplant war das aber nicht so, ich habe hier im Forum geschrieben, dann geschrieben, weil ich dachte, dass mir hier vielleicht jemand helfen kann, OHNE dass ich die Homepage dafür online stellen muss. Dein Tipp, es nur vorübergehend zu veröffentlichen, war dann aber wirklich gut.

Ich werde jetzt wohl einfach noch viel weiter daran herumbasteln und hoffen, dass ich die Homepage irgendwie so hinbekomme, wie ich es mir vorstelle. Deinen CSS-Code habe ich jetzt wieder rausgenommen, weil ich ja nicht wirklich weiß, ob er jetzt sinnvoll ist in meinem Fall.

Vielen lieben Dank für deine Mühe und Hilfe! :-)

@SEpp55

Zitat von SEpp55

.... das wäre dann wen 99% fertig sind ggf noch zu betrachten.

Ok, dann meld ich mich dann gffls. wieder, um den Code anzupassen. ;-)
Aber ich füchte, es wird eh noch seine Zeit dauern...

Ganz lieben Dank auch für den Hinweis mit dem Hamburgermenü und den Code dafür! Hab ihn gleich eingefügt und schaut sehr gut jetzt aus! :-)