Bildausschnitt für mobile Ansicht von mittig auf rechts ändern

[Sabine]

Hello,

ich baue gerade an meiner Seite und möchte für die mobile Ansicht einen Ausschnitt aus dem Headerbild definieren. Standartmäßig packt Mobirise entweder genau den Mittelstreifen z.B. zoomt etwas aus der Mitte.

Ich bräuchte einen bei der mobilen Ansicht einen Bildausschnitt rechts.

https://www.gutmann-beratung.at/neu/

Mein Ziel: Wir sind rechts im Bild (wie am 1. Bild) und die mobile Ansicht zoomt etwas raus (wie auf dem 2. Headerbild) aber packt uns dann eben drauf obwohl wir rechts und nicht mittig stehen.

Danke :-)))
Sabine

[Tommy Herrmann]

Moin Sabine,

und willkommen hier im Forum

Es ist ja so, dass es immer auf den Block ankommt. Mit viel Mühe könnte man einer anderen Display-Größe eben auch ein anderes Hintergrund-Bild verpassen. Etwa mit so einer Media-Anweisung, die das Hintergrundbild an einem Display wie einem Handy, z.B. bei <= 767px, in ein passendes, anderes Bild ändert.

Code: Alles auswählen

@media (max-width: 767px){
    background-image: url("assets/images/anderes-bild.jpeg")
}

Meist ist die CSS für Header-Bilder so eingestellt, dass diese am Handy mittig dargestellt werden (und werden müssen), da diese Bilder, um auch die Höhe zu füllen, die CSS-Eigenschaft "cover" (bedecken) tragen - wie auch Dein Hintergrundbild vom Header. Die Bilder müssen ja einerseits die Block-Höhe füllen, dürfen aber andererseits nicht verzerrt werden - also müssen sie beschnitten werden. Mobirise, bzw. die CSS kann ja nicht wissen, wo die Personen stehen und so wird bei "cover" das Bild immer mittig angezeigt.

Screenshot von meinem Samsung Handy

Im Bild darunter wird ja das Bild am Handy auch verkleinert und es wird dadurch das gesamte Bild dargestellt. Dies ist dann eben auch die richtige Wahl zur Darstellung von Personen.

Mit anderen Worten - ein Bild mit Personen ist für diesen Header-Block ausgesprochen ungeeignet - oder diese Personen sollten von Beginn an mittig stehen oder man muss mittels "@media" Anweisung (Code oben) ein zweites, anderes Bild für das Handy wählen.

Dennoch würde dann wahrscheinlich nur eine Person am Handy zu sehen sein. Das Bild ist so nicht geeignet, außerdem ist dieses Bild schon sehr unscharf und von der Qualität ohnehin sehr schlecht und ungeeignet.


Ich würde dazu raten ein anderes Bild für den Header, mit allgemeiner Darstellung, zu suchen (wie ja auch schon bei den anderen Seiten gewählt).

Wenn Du auf Sprungmarken ("Anker") innerhalb einer Seite verlinkst, solltest Du auch darauf achten, dass der obere Abstand des Blocks der Sprungmarke höher gewählt ist (so auf Position 6 steht in den Werkzeug-Einstellungen), weil sonst das "Padding" (Abstand) des Blocks zu gering ist und dieser, durch die Navi bedingt, zu sehr oben am Rand "klebt".

Du solltest grundsätzlich nochmals darüber nachdenken überhaupt ein "AMP" Thema zu verwenden, wovon ich nur dringend abraten kann.

"AMP" ist eine ganz eigene Technologie von Google und hat ganz bestimmten Syntax mit sehr eingeschränkter CSS (z.B. werden gar keine CSS-Dateien zugelassen) und man kann fast nichts selbst ändern, ohne diesen Syntax AMP-ungültig zu machen, was dann wieder sehr schlecht für die SEO (Suchmaschinen-Optimierung) ist, denn Google straft "AMP" Seiten ab, wo nur "AMP" drauf steht aber nicht drin ist

Suche Dir eines der "M4" oder ein Standard-Thema und verwende möglichst kein "AMP". Da kann Dir dann hier auch niemand so richtig gut helfen.

Dann verwendest Du die Bootstrap-Technologie mit allen Möglichkeiten und Dir stehen hundert Mal so viele Blöcke zur Verfügung, da nur die "M4" Themen untereinander kompatibel sind. Du kannst also in AMP auch nur AMP Blöcke verwenden und keine Blöcke aus anderen Bootstrap-Themen.

[Martin73]

Hallo Sabine,
willkommen hier im Forum.
Ich denke, die Mediaanweisung (siehe Tommy) ist das Schlüsselwort. Alternativ könnte man für die Startseite einen Block "Intro with image" nehmen. Als Bild den Ausschnitt der 2 (hübschen) Personen und als Text "Wir stärken den Erfolgsfaktor Mensch". Dann passt sich der Block der Bildschirmgröße automatisch an. Der individuelle Schrifttyp wird dann aber etwas schwierig, da die Schrift bei Mobirise generell hierarchisch geodnet ist (Überschrift, Text, Menü). Der Schrift müsste man dann die class="display-1" geben und sicher stellen, dass sie im CSS definiert ist:
.display-1 {
font-family: 'Fredericka the Great',display;
font-size: 4rem;
line-height: 1.2;
}
Ich würde einen der zahlreichen Blöcke "Intro with image nehmen".

[Sabine]

Herzlichen Dank euch beiden für die nette Rückmeldung und rasche Unterstützung!!

Guter Tipp mit dem M4 - vielleicht die nächste Website-Version - aktuell bin ich gerade am verzweifeln mit dem Titel... Wenn ich mir vorstelle, jetzt alles noch einmal neu zu bauen *omg*

Ich habe auch ganz viele Versionen mit Bild im Bild versucht - aber leider nichts gefunden, dass mir richtig gut gefällt. Jetzt bin ich wieder bei der Variante: anders Bild am Handy angelangt.

Leider schaffe ich es nicht, die Media Anweisung richtig einzubauen - hier ein Schnipsel vom CSS Code. Könntet ihr mir sagen wo ich das genau einfüge?

}
@media (max-width: 992px) {
.title-block {
margin: auto;
}
.img-1 {
padding-right: 10rem;
}
}
.mbr-section-title, .mbr-section-btn {
color: #ffffff;
}
.mbr-section-subtitle, .mbr-section-btn {
color: #ffffff;
}

Und wisst ihr zufällig wie das nach einem Jahr ab Vertragsdatum weitergeht? Muss ich jedes Jahr die 150,- zahlen damit die Seite noch gut zu warten bleibt?

Danke aus Österreich

[Tommy Herrmann]

Ich habe gerade keine Zeit - aber nur zur Info - die CSS-Klassen, die bei der Display-Größe (bis 992px) wirken sollen, müssen natürlich alle innerhalb der Media-Anweisung stehen.

Code: Alles auswählen

@media (max-width: 992px) {
    .title-block {
        margin: auto;
    {
    .img-1 {
        padding-right: 10rem;
    }
    .mbr-section-title, .mbr-section-btn {
        color: #ffffff;
    }
    .mbr-section-subtitle, .mbr-section-btn {
        color: #ffffff;
    }    
}

... und ja - die Lizenz gilt immer 1 Jahr - im Anschluss kannst Du die Erweiterungen nur noch editieren aber nicht als neue Blöcke verwenden und keine neuen Seiten damit erstellen. Will man sein Abo nicht erneuern (ich habe noch nie mehr als 95,00 USD bezahlt), dann darf man aber auch die Software nicht updaten, denn sonst wird es (früher oder später) nicht mehr funktionieren.

Lies mal meinen Beitrag hier:

viewtopic.php?f=31&t=55

... und hier:

viewtopic.php?f=31&t=176