Problem mit responive header image

22.11.2019 16:50

M_B
#1

M_

Hallo zusammen.

Ich komme gerade dahingehend nicht weiter, dass das Headerbild in der mobilen Ansicht nie die optimale Höhe hat. Die Breite passt, nur bei der Höhe habe ich das Problem, dass das Bild zu abgeschnitten ist (iPad) bzw. einen viel zu großen Platz einnimmt und dadurch viel Weißraum entsteht (iPhone 6/7/8 Hochformat). Im Querformat ist wird es auf iPhone 6/7/8 es nahezu ideal dargestellt.

URL der Seite ist: www.joyinme.de

Danke schon mal und viele Grüße

Antworten

Beitrag melden

#2

25.11.2019 15:10

Charles
#2

Charles

1
2
3
4
 
@media only screen and (max-width: 768px)
.jtpl-header--image {
    height: 390px;
}
 

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

Antworten

Beitrag melden

#3

26.11.2019 11:58

M_B
#3

M_

M_B

@Charles Danke für die Antwort, nur entsteht dadurch leider in der mobilen portrait Ansicht ein ziemlich großer Weißraum. Das scheint nicht zu 100% der Lösungsansatz zu sein. Könntest Du da bitte nochmal draufschauen?
DAnke und Grüße

Antworten

Beitrag melden

#4

27.11.2019 11:58 (zuletzt bearbeitet: 27.11.2019 11:58)

az_
#4

az_

versuch einmal das Seitenverhältnis der Grafik als vw für die Höhe. Also

1
2
3
4
5
6
 

@media only screen and (max-width: 768px)
.jtpl-header--image {
    height: 33vw; /*...oder so*/
}
 
 

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html