Reha-Zentrum

[stobi_de]

Morgen!
Gestern rief mich jemand aus der Nachbar-Stadt an und fragte, ob ich auf seiner Website ein paar Bilder austauschen könnte. (www.rosbacher-reha.com - IONOS Baukasten).
Nun wird das natürlich kein Problem sein, auch wenn ich den Baukasten nicht im geringsten kenne.

Die bestehende Internetseite finde ich allerdings für das größte Reha-Zentrum der Region eher bescheiden.

Das will ich mich nun mal weit aus dem Fenster lehnen und aufs gerade wohl eine Alternativseite anbieten.
Das geht natürlich nach hinten los, wenn der Reha-Zentrums-Inhaber selbst die Seite gebaut hat.

Hier mal mein Entwurf - teilweise ein Recycling einer alten ungenutzten Seite. Bitte Kritik! - Ist jetzt wirklich nix Dolles
https://www.afripix.de/physio/

Frank

[Tommy Herrmann]

Moin,

wenn er nur Bilder austauschen möchte, sollte er dir die Zugangsdaten zu IONOS geben. Das sollte schnell zu bewältigen sein, und der Support hilft sicherlich umgehend weiter.

Deine Seite ist natürlich um Längen besser und viel zeitgemäßer. Da gibt es eigentlich nichts zu diskutieren. Zeige ihm doch deine Seite und beobachte seine Reaktion. Das Bild vom Header-Block sollte etwas tiefer, damit die Köpfe nicht so abgeschnitten sind.

Vielleicht möchte er die Kosten für eine komplette neue Seite vermeiden, was verständlich ist, wenn es ihm nur um einige Bilder geht.

[stobi_de]

Wie bekomme ich denn auf dem handy die Schrift nach ganz unten im Header?
https://www.afripix.de/physio/

Mit align-items:flex-end geht das im Debugger, aber nicht in Mobi

[Tommy Herrmann]

… ich habe heute nicht mehr die richtige Zeit genauer zu gucken.

Auf Anhieb würde ich sagen, dass dieses <h1> falsch platziert ist:

Code: Alles auswählen

          <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-4 myoverline display-1">
                  <div class="glow-text">
                      Rosbacher Reha &amp; Physio-Sport
                  </div>
          </h1> 

Das steht über "Kontakt" und müsste darunter stehen mit einem "padding-top".

[Tommy Herrmann]

Moin,

also - das ist jetzt ein wenig schwierig das von hier aus zu sehen und am Browser zu testen, da es ja nur das Handy betrifft.

Du hast ja da so einen "Glow" Effekt eingebaut und dafür das <h1> Tag aus dem Titel verwendet:

Code: Alles auswählen

@media (max-width: 768px) {
  .cid-ukms3r5FrN .mbr-section-title {
    text-align: center !important;
    padding-top: 10rem;
  }
}

Das setzt Mobirise mit der class="mbr-section-title" am Handy zentriert, da man ja dort den Titel normalerweise auch lesen will. Ich habe mal das padding-top mit 10rem hinzugefügt, kann es aber nicht genau von hier aus sehen.

Versuche es mal mit diesem Padding in dieser Class.

Auf jeden Fall scheint es noch zu einem Konflikt mit dem "Parallax" zu kommen, denn dieser Effekt wirkt sich ja eben genau auf das <h1> Tag aus und dieser Titel verändert seine Höhe beim Scrollen.

Dann scheint auch noch die class="link-wrapper" vom Link "Kontakt", mit ihrer absoluten Position, Probleme zu machen.

[stobi_de]

Der Kontakt-Link-Wrapper verschwindet sowieso auf dem Handy.
Ich habe es dann mit einem margin-top auf die ganze row gemacht.

Code: Alles auswählen

.row {
    margin-top: 80vh!important;
  }

Aber es sollte doch auch irgendwas geben, mit dem man eine row grundsätzlich an den unteren Rand verbannen kann.

[Tommy Herrmann]

Die "row" ist doch aber nur so hoch wie deren Inhalt. Da müsstest Du dann eher dem Container selbst eine absolute Höhe verpassen, dann gibt es aber wieder andere Probleme.

Da hat sich ein kleiner Fehler eingeschlichen - Gänsefüßchen zu viel:

Code: Alles auswählen

<!--tag-->
<meta property="website:tag" content="Physiotherapie" " />
<!--tag End-->

Was ist das denn überhaupt für ein Property-Tag - kenne ich gar nicht. Wo wird das denn beschrieben?

[stobi_de]

Das sonderbare Tag war irgendwas übrig Gebliebenes aus einem Google-Ads Versuch.
Ist wieder weg gelöscht, danke für den Hinweis.

[Tommy Herrmann]

das mit den abgeschnittenen Köpfen ist ganz schlecht.

Ich weiß jetzt nicht was das für ein absolut positioniertes <div> ist, das steht aber auf "top: 0px".

Habe es jetzt mal auf "top: 130px" gesetzt:

Code: Alles auswählen

<div style="position: absolute; top: 130px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100;" id="jarallax-container-0"><div style="background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-image: url(&quot;https://www.afripix.de/physio/assets/images/arm-behandeln.jpeg&quot;); position: absolute; top: 0px; left: 0px; width: 1600px; height: 527.88px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; margin-top: -14.94px; transform: translate3d(0px, 14.94px, 0px);"></div></div>

… dann sind die Leute auch nicht mehr kopflos

Top.jpg

... vorher:

kopflose Menschen.jpg

[stobi_de]

Das muss ein Div aus jarallax sein.
Ich fragte ja schon im Mobi-Forum, ob es da eine Möglichkeit gibt, das Ding zu beeinflussen oder mit einer neuen Version zu überladen.
Wenn nicht parallax, ist alles OK, weil beeinflussbar.

So geht das, aber auf meinem Monitor sieht das dann daneben aus

Code: Alles auswählen

#jarallax-container-0 {
  top: 130px!important;
}

[stobi_de]

Es gibt ja noch den "Spacer" von Dentaua - was im Grunde auch nichts anderes ist als ein einstellbares DIV.
Aber wir haben hier sowieso wieder ein Projekt für die Asservatenkammer.

Die bestehende Seite von Rossbacher-reha wurde "ganz hervorragend" vom Schwager des Besitzers erstellt.

[stobi_de]

Nur so als Info, wenn jemand hier noch nachliest:
das abgelehnte Projekt findet man jetzt hier, ohne einen Verweis auf den ursprünglichen Interessenten
https://www.afripix.de/reha-physio

Gruß
Frank