png Bild Größe PC und Größe Handy

[scherenschlag]

Moin.
Hatten wir bestimmt schon. Finde natürlich wieder mal nichts.
Schaut bitte mal:
https://www.gaststaette-zur-sonne.de
Und zwar so ziemlich in der Mitte bei Getränke.
Das Büble Bier Logo hat für den PC eine gute Größe.
Aber auf dem Phone ist es ein bissken zu groß.
Wie kann ich das nochmal anpassen?
Danke ....

[Tommy Herrmann]

Moin,

bin mir jetzt nicht ganz sicher, aber ich denke wenn Du die class="image-wrapper" für das Handy anpasst, sollte das gehen.

Dazu legt man die Media-Abfrage außen um die Class herum. Wenn also das Display vom Gerät bis zu 767px Breite hat, dann soll die Breite vom Bild nur noch 50% (anstatt 100%) sein.

Das kopierst Du dann unten in den Bereich "CSS Editor" des Blocks mit dem Bild:

Code: Alles auswählen

@media (max-width: 767px) {
    .image-wrapper {
       width: 50%;
    }
}

[scherenschlag]

Schon mal danke.
Baue ich gleich ein und schaue mal.
Im Moment habe ich aber mal wieder das merkwürdige Problem, dass die Seite auf meinem Samsung Flip 5
viel zu klein angezeigt wird. Und auf dem Handy meiner Frau, Samsung S23, so wie es sein soll. Lesbar.
Habe ich nicht zum ersten Mal. Lege jetzt mal ne größere Pause ein und schaue heute nachmittag nochmal.
Meistens legt sich das Problem dann von alleine.
Ist aber schon merkwürdig.

[Tommy Herrmann]

Du musst zwingend den Cache vom Browser am Handy löschen.

> Hamburger Menü > Einstellungen > Persönliche Browserdaten

[Tommy Herrmann]

Hier hatte ich zum Löschen des Cache vom "Android-Browser" (Samsung) am Handy mal ein Video am Handy erstellt. Gucke Dir das bitte an:

viewtopic.php?p=11273#p11273

... oder gleich hier

[scherenschlag]

Cache. Ich wusste es. Hatte ich auch schon. Cache gelöscht. Und siehe da: Alles in Butter...

[Tommy Herrmann]

Moin Thomas,

Worauf ich dich noch hinweisen wollte: Deine verdrehte "Karte" auf 355° bei den Öffnungszeiten verursacht am Handy einen kleinen Überlauf (Querscroller).

Dadurch überragt diese Karte die maximale Breite, was horizontales Scrollen der gesamten Seite verursacht und alles nicht mehr mittig sitzen lässt. Dadurch rutscht auch das Hamburger-Menü aus dem Fokus und ein ganzes Stück nach rechts.

Das musst Du ändern, denn das ist auf dem Handy sehr unschön und zerstört das Layout.

Persönlich finde ich die schräg stehende Karte ohnehin ziemlich hässlich und unpassend zum restlichen Design, aber das ist natürlich Geschmackssache.

Am besten wäre es wahrscheinlich, die Karte für Smartphones über eine Media-Abfrage wieder gerade zu stellen, also auf 0° bzw. 360°.

deg = degree = Grad

Code: Alles auswählen

@media (max-width: 767px) {
    .card .card-wrapper {
      transform: rotate(0deg);
    }
}