Wie platziere ich die headline responsive/ „mobil friendly“?

Gelöst lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 12 Monaten
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 (Pro)

1. Problem:
Nach einigem Hin und Her sowie Hilfe vom Astra-Support habe ich es immer noch nur teilweise hinbekommen, dass sich das Headerbild auf meiner Startseite responsive verkleinert. Noch immer wird es auf Smartphone-Größe einfach an den Seiten beschnitten, anstatt zu „schrumpfen“. Der eingebaute CSS-Code lautet:
```
@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;
}
}
```
Kann mir jemand sagen, ob/wie ich den Code so umbauen kann, dass auch auf dem Smartphone, also bei kleiner Bildschirmgröße, das Bild vollständig zu sehen ist?

2. Problem:
Die Anordnung der Headline (auf dem Headerbild). 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 und könnte mir bitte helfen? Leider schreibt mir der Astra-Support, sie würden in solchen Fällen nicht beraten…

Einen Link zur Homepage kann ich leider nicht schicken, da sie noch nicht online ist. Ich könnte höchstens jemandem einen Zugriff als Betrachter geben, wenn sich das jemand genauer anschauen mag. Aber vielleicht kann mir ja jemand auch so schon helfen, das wäre natürlich am besten.

Vielen Dank vorab!
LG, Nin

PS: Ich kenne mich übrigens NICHT mit CSS aus, habe die Codes nur vom Support bekommen. Außerdem zur Info, falls das relevant ist: Ich habe zusätzlich noch folgenden CSS-Code eingebaut, der meines Wissens nach dafür sorgt, dass das Headerbild auf mobiler und Tablet-Ansicht nicht fixiert ist:
```
@media only screen and (max-width: 976px) {

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

background-attachment: scroll;
}
}
```

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 26)

1 2 →

bscu
(@bscu)

vor 2 Jahren, 12 Monaten

Einen Link zur Homepage kann ich leider nicht schicken

Dann wird es schwer. Was wir nicht sehen, können wir nicht korrigieren, sondern nur raten.

Und so wie es aussieht, scheinen das ja auch keine WordPress-, sondern CSS-Probleme zu sein, und dafür ist dieses Forum eigentlich nicht gedacht.
Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 12 Monaten
Ist so etwas denn nicht auch ohne CSS lösbar? Man muss doch die Headline bei einem Theme, das als „responsive“ angegeben wird, so platzieren können, dass sie sich anpasst, oder sehe ich das falsch?

Aber danke schon mal für den Hinweis mit CSS, vielleicht gibt es dafür ja ein CSS-Forum, wo ich mich hinwenden kann…

Vielleicht hat ja aber auch jemand anders hier noch einen Hinweis?
- Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von lebenskompetenz11.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 12 Monaten

Vorab: Bei Fragen zu gekauften Themes (hier: Astra Pro) können wir dir nicht weiterhelfen, weil sie uns für einen kostenlosen Support nicht kostenlos zur Verfügung stehen.

Bitte wende dich bei Fragen zu diesem Theme an die Entwickler.

Deine Frage ließe sich sicher besser beantworten, wenn wir auch einen Link zur Website hätten und uns das anschauen könnten. So kann ich nur sehr allgemein etwas dazu sagen:

Wenn du ein Bild in verschiedenen Bildschirmgrößen anzeigen möchtest, stellt sich die Frage, ob sich die Bildhöhe ändern soll. Soll sie das nicht (z.B. weil das Bild ein Hintergrund für einen Abschnitt mit festen Abmessungen ist) bleibt nur die Möglichkeit, das Bild je nach Bildschirmgröße an den Seitenrändern abzuschneiden. Sonst würden die Bildseitenverhältnisse geändert und das Bild gestaucht/verzerrt dargestellt werden.

Meld dich doch nochmal, wenn die Website online ist – dann können wir uns das zumindest mal anschauen.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 12 Monaten

Man muss doch die Headline bei einem Theme, das als „responsove“ angegeben wird, so platzieren können, dass sie sich anpasst, oder sehe ich das falsch?

Klar, geht alles. Aber was sollen wir jetzt machen? Nach deinen wenigen Angaben eine Website mit Astra aufbauen und dann hoffen, dass das bei uns ähnlich aussieht wie bei dir? Dann vermuten, welchen Änderungen du vorgenommen hast?

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 12 Monaten

@pixolin Danke für deine Antwort. Zum gekauften Theme: Ich hat ja schon bei der kostenlosen Version nicht funktioniert. Ich habe mir dann die Pro-Version gekauft, in der Hoffnung, dass es etwas ändert. Bin mir nun aber nicht mehr sicher, ob ich sie behalten werde… Beim Support/ Entwickler hat man mir wie gesagt nicht mehr weitergeholfen mit dem Problem.

Zu „Wenn du ein Bild in verschiedenen Bildschirmgrößen anzeigen möchtest, stellt sich die Frage, ob sich die Bildhöhe ändern soll.“
–> das Bild soll sich einfach in seiner ganzen Größe verringern. Es ist dann am Handy halt recht klein.
Andere Möglichkeit wäre vielleicht, auf dem Smartphone auf ein anderes Bild zu wechseln, aber ich nehme an, dass das auch nicht viel einfacher geht, oder?

Ich möchte die Homepage nicht online stellen, solange sie noch im Aufbau ist und eigentlich auch nicht, solange das mit der Headline nicht gelöst ist.

Aber hier kannst du dir die Starterpage anschauen, die ich verwendet habe:
https://websitedemos.net/entrepreneur-08/
Hier ist es so, dass sich, wenn man das Browserfenster kleiner zieht, die Schrift schon verkleinert. An den „Übergängen“ überlappt sie mal kurz das Gesicht, aber nicht lang, dann wird sie wieder kleiner. Aber irgendwann verkleinert sie sich nicht mehr und as Hintergrundbild wird an der Seite abgeschnitten.
Bei mir kommt halt noch hinzu, dass ich es wie gesagt gern so hätte, dass die Headline bei kleinerem Bildschirm tiefer gesetzt ist.

Zu deiner Frage was ihr machen könnt: Nein, natürlich erwarte ich nicht, dass ihr irgendwas auf gut Glück nachbaut. Ich kenne mich da leider nicht so aus und dachte einfach, jemand hat vielleicht Erfahrungen mit diesem Problem, unabhängig davon, wie meine Seite konkret ausschaut.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 12 Monaten

Zum gekauften Theme: Ich hat ja schon bei der kostenlosen Version nicht funktioniert. Ich habe mir dann die Pro-Version gekauft, in der Hoffnung, dass es etwas ändert.

Wir weisen grundsätzlich darauf hin, dass wir bei gekauften Themes und Plugins nicht helfen können.

Wir helfen hier in unserer freien Zeit und ohne Aufwandsentschädigung. Wir können uns nicht jedesmal ein Theme oder Plugin kaufen, um uns die Einstellungsmöglichkeiten anzuschauen und dann kostenlos den Support zu geben, für den du einen Theme-/Plugin-Entwickler bezahlt hast.

Wenn du ein Theme kaufst, bekommst du es so, wie es ist. Du kannst es anpassen, wenn du über entsprechende Kenntnisse verfügst, aber der Entwickler wird sich selten die Mühe machen, individuelle Änderungswünsche umzusetzen. Der verdient sein Geld damit, ein fertiges Theme abzuliefern – so, wie es ist. Wenn dann damit etwas nicht klappt, hast du auch Anspruch auf Support. Mehr kannst du für die rund 50 Euro, die du für eine Pro-Version zahlst, kaum erwarten.

–> das Bild soll sich einfach in seiner ganzen Größe verringern. Es ist dann am Handy halt recht klein.

Das ist meistens nicht brauchbar. Du kannst aber mal im Customizer unter Zusätzliches CSS .wp-block-cover { background-size: cover; } eingeben und dir das auf verschiedenen Displays anschauen.

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

Hallo @pixolin! Ich weiß, dass ihr in eurer freien Zeit helft und halte das auch nicht für selbstverständlich. Ich habe es nun schon sehr lang alleine versucht, aber bin einfach nicht weiter gekommen, daher wende ich mich jetzt an euch und bin sehr dankbar, wenn mir jemand hilft.

Nach einigem Hin und Her habe ich es jetzt irgendwie hinbekommen, dass sich das Headerbild auf der Startseite verkleinert. Aber die Headline verkleinert sich sehr stark mit, sodass sie auf dem Smartphone viel zu klein ist.
Auch die Anordnung der Headline ist dementsprechend natürlich auch nicht wie gewünscht…

Damit ihr mir besser helfen könnt, habe ich jetzt mal einen Maintenance-Mode eingerichtet und temporär deaktiviert. Also wenn mir jemand dadurch helfen kann und mag – bitte, sehr gern! Hier der Link: https://www.lebenskompetenz-forum.com

Vielen Dank schon mal vorab, wenn mir wer helfen mag! 🙂

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

@bscu Ich habe jetzt mal einen Maintenance-Mode eingerichtet und temporär deaktiviert. Vielleicht kannst du ja bitte auch mal draufschauen? Das wäre sehr nett!
Hier der Link: https://www.lebenskompetenz-forum.com

Was meine Probleme jetzt noch sind – siehe vorheriger Post.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 11 Monaten
Du verwendest das Plugin Ultimate Add-Ons für Gutenberg. Der Sinn dieses Plugins ist, Blöcken noch mehr Einstellungsmöglichkeiten für Abstände, Hintergrund, Typographie usw. zu geben.

Ich habe jetzt mal folgendes probiert:
1. Neue Seite
2. UAG-Block Abschnitt hinzugefügt:
  volle Breite
  Blockeinstellungen: Full width, Background-Type: Image, No-Repeat, Cover
3. In den Block ein UAG-Block Erweiterte Überschrift
  
  (zum Vergrößern anklicken)
  Bei Typography auf den Schraubenschlüssel geklickt [1]
  Die kleinen Icons oben rechts [2] bieten dir Einstellungsoptionen für Desktop, Tablet und Smartphone. Hier kannst du eine Textgröße für diese Geräte vorgeben. Was hier aussieht wie ein weißen Kreis [3] ist eigentlich ein Schieberegler. Du kannst den Wert aber im Feld daneben auch direkt eingeben.
4. Seite veröffentlichen, mit Webentwickler-Tools (Taste F12) Ansicht auf Mobile umschalten: die vorgegebene Textgröße wird übernommen.
Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

Vielen lieben Dank fürs Nachbauen! Allein die Info mit dem Schraubenschlüssel bringt mir schon sehr viel! Ich wusste, dass man irgendwo zwischen Desktop-Tablet-Mobil verschiedene Einstellungen machen kann, aber hatte nicht gefunden wo das ist!

F12 funktioniert bei mir leider nicht (da geht der Flugmodus an). Aber im Firefox habe ich die Webentwicklertools gefunden und logge mich dann eben per Internet Explorer ein.

Ich habe eine Weile herumprobiert und das mit den Größen jetzt schon besser hinbekommen! 🙂 Aber leider die Platzierung der Headline immer noch nicht. Habe auch nochmals mit den „Abständen“ (Padding und Margin) im Block (in dem die Überschrift liegt). Aber leider habe ich es nicht geschafft, dass die Überschrift tiefer rutscht. Nur am Laptop sieht es so aus, wie ich möchte.
Und ich bekomme auch den Abstand zwischen Headline und Subtitle leider nicht weg.

Ein Problem, das es mir noch zusätzlich erschwert: In der Mobilansicht „springt“ mir beim Scrollen das Bild immer hinunter. Also wenn ich von unten hochscrolle zur Überschrift, komme ich oft gar nicht so weit, sondern es scrollt von allein ganz nach unten, sodass ich wieder hochscrollen und die Überschrift erneut anklicken muss (wenn ich es denn schaffe). Hast du eine Idee, woran das liegen könnte?

Kann ich über den Weg mit den unterschiedlichen Bildschirm-Ansichten es auch irgendwie schaffen, dass auf dem Handy die (kleinere) Unterüberschrift einfach weggelassen wird?

Das waren jetzt einige Fragen auf ein Mal, hoffe nicht zu viel..
Dankeschön vorab!

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 11 Monaten

Aber im Firefox habe ich die Webentwicklertools gefunden und logge mich dann eben per Internet Explorer ein.

Du kannst dir das Frontend in einem neuen Tab mit aktivierten Webentwickler-Tools anschauen, ohne dich abmelden zu müssen. Wenn du wissen möchtest, wie die Website für nicht angemeldete Benutzer aussieht, reicht auch ein neues „privates“ Fenster im Browser.

Also wenn ich von unten hochscrolle zur Überschrift, komme ich oft gar nicht so weit, sondern es scrollt von allein ganz nach unten, sodass ich wieder hochscrollen und die Überschrift erneut anklicken muss (wenn ich es denn schaffe).

Die Erklärung verstehe ich nicht. Meinst du, dass das Hintergrundbild beim Scrollen nicht mitläuft, sondern als fixierter Hintergrund stehen bleibt? Das lässt sich mit den Hintergrund-Einstellungen festlegen.
Mit einem Link zur Webseite wäre das sicher leichter nachzuvollziehen.

Denk bitte daran, dass wir nach Möglichkeit in jedem Thread nur ein Thema behandeln wollen, weil es sonst schnell unübersichtlich wird und wie Themen auch nur einmal als „gelöst“ markieren können. (Das machst du dann bitte noch?)

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

Danke für deine Antworten @pixolin !
Das mit dem privaten Fenster ist ein guter Tipp, das macht es mir einfacher.

Bzgl. Scrollen: Nein, das mit dem fixierten Hintergrund meine ich nicht, sondern es ist irgendein Fehler im Bearbeitungsmodus. Die Anzeige springt einfach herunter.
Den Link zur Website hast du ja! Aber dort sieht man den Fehler nicht, weil es nur im Bearbeitungsmodus so ist. Aber ich fürchte, dass du mir da nicht helfen kannst, wenn du das noch nie hattest. Ich werd es mal googeln, vielleicht hatte das Problem schon mal jemand…

Ok, wenn das Thema gelöst ist, markiere ich es gern so und fange bei Bedarf ein neues an. Aber leider ist das mit der responsiven Headline ja noch nicht ganz gelöst. Wie gesagt, die Größe passt jetzt. Aber leider die Platzierung noch nicht. Die Headline soll am Handy tiefer platziert sein, als an Tablet oder Laptop – also eben so, dass die Gesichter nicht verdeckt sind, wenn man auf die Homepage kommt.

Und ich bekomme auch den Abstand zwischen Headline und Subtitle leider nicht kleiner (Handyansicht).

Meine Frage, ob es möglich ist, den Subtitle auf Handy und Tablet auszublenden, sodass er nur am Laptop erscheint, zähle ich auch noch zu diesem Thema, denn es geht ja immer noch um das Thema „responsive Headline“. 😉
Hast du da eine Lösung?

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 11 Monaten

Die Headline soll am Handy tiefer platziert sein, als an Tablet oder Laptop – also eben so, dass die Gesichter nicht verdeckt sind, wenn man auf die Homepage kommt.

Du solltest dich ein wenig mehr mit den Einstellungsmöglichkeiten der Blöcke des Gutenberg Ultimate AddOn beschäftigen. 🙂

Wenn du einen Abschnitt einfügst, kannst du in der Sidebar unter Abstand die Innenabstände festlegen – auch wieder getrennt für verschiedene Display-Größen.

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

Das Problem ist, dass die meisten Erklärvideos zum Plugin, die ich gefunden habe, auf Englisch sind und da verstehe ich dann leider nur die Hälfte. Aber der Hinweis, ich habe es jetzt durch viel probieren hinbekommen, die Überschrift zu verschieben. 🙂

Soweit ich sehe, kann man den Abstand zwischen Headline und Subline aber nur global ändern, also auf allen Bildschirmgrößen gleich. Stimmt das, oder habe ich etwas übersehen?

Daher wäre es in meinem Fall vielleicht wirklich sinnvoll, den Subtitle am Handy wegzulassen, weil er recht weit von der Headline entfernt steht und das nicht so schön aussieht, finde ich. Gibt es da eine Möglichkeit?

Und jetzt ist durch die Verschiedung das Problem aufgetreten, dass der türkise Button bei Tablet-Ansicht zu nah am Subtitle ist. Ich finde aber keine Einstellungsmöglichkeit, um den Abstand dieses Buttons zu ändern und auch über die Einstellungen des Subtitles kann ich es nicht lösen…

Thread-Starter lebenskompetenz11
(@lebenskompetenz11)

vor 2 Jahren, 11 Monaten

„durch die Verschiebung“ wollte ich im letzten Absatz natürlich schreiben.