Headerbilder gestreckt und abgeschnitten

Moin zusammen, ich weiss nicht weiter und brauche eure Hilfe.

Bei dieser Seite sind seit kurzem die Headerbilder (alle gleiches Format) gestreckt wie Kaugummi und mittig abgeschnitten und nur eins ist noch normal.

Ich danke im voraus für eure Unterstützung ( Ich vermute eventuel CSS, bin aber unsicher und möchte nicht unnötig verschlimmbessern)

Zeta Premium 16 Campfire Responsive

Beste Grüße

Andy

Alle Bilder sind 1100. Das passte seit Version 5 und das Bild mit der Plane ist ja auch "ganz" und hat auch nur 1100.

Ich weiss auch niht obe es was mit dem Update 16.01 zu tun hat. Ich warte nochmal ob andere Lösungen passen könnten.

Danke aber dafür

Zitat von Steffen T.

Hallo,

was steht denn im Layout-Designer unter Kopfgrafik > Bild > Höhe ?

Breite 1100 Höhe 400 - so hatte ich auch die Bilder angelegt und war 2 Jahre lang alles gut. Leider hab ich nicht drauf geachtet ob es auch vor dem Update 16.1 auch war.

Zitat von Steffen T.

Hallo,

fügen Sie mal in den Website-Einstellungen unter CSS folgendes ein und veröffentlichen dann die Website:

CSS

<style>
#slider .slides > li > img {
    height: auto !important;
}
</style>

Hat das geholfen?

Leider nicht. ich habe mal den Css code angehängt der seit der Erstellung drinne ist + den Zusatz von eben.

2 Bilder gehen ja (Bild mit Plane und mit Golfball) die anderen sind murks

Da sind einige "Header" Befehle drinne. Ansonsten lösche ich einmal den kompletten Header und mach den mal neu!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font…awesome.min.css">

<style>

header {

padding-top:30px;

}

.topbarzp {

position:fixed;

left:0;

top:0;

height:30px;

width:100%;

background:#1C3D5C;

padding: 4px;

z-index:30000;

}

.spaltentopbarzp{

float: left;

padding-left: 39%;

}

a.linktopbarzp {

color: #FFFFFF !important;

text-decoration: none;

font-size: 14px;

text-align: center;

text-decoration: none;

padding-right: 10px;

font-weight: light;

}

a.linktopbarzp:hover {

color: #FFFFFF !important;

text-decoration: none !important;

}

media (max-width: 860px) {

a.linktopbarzp span {

display: none;

}}

.icon {

font-size: 16px;

position:relative;

top:2px;

padding-right:7px;

}

</style>

<style>

h1{font-size: #val(pagetitle-font-size) !important;}

h2{font-size: #val(articleheading-font-size) !important;}

h3,h5,h6{font-size: #val(articlesubheading-font-size) !important;}

h4{font-size: #val(articleh4heading-font-size) !important;}

#slider h1,

#slider h2,

#slider h3,

#slider h4,

#slider h5,

#slider h6{

font-size: #val(headerheading-font-size) !important;

}

</style>

<style>

media(max-width:860px) {

.responsivelayout div.zpRow .zpColumn.c1, .responsivelayout .zpColumnItem.c1,

.responsivelayout .zp-form .c1, .responsivelayout .zpgrid .c1, .responsivelayout div.zpRow .zpColumn.c2,

.responsivelayout .zpColumnItem.c2, .responsivelayout .zp-form .c2,

.responsivelayout .zpgrid .c2, .responsivelayout div.zpRow .zpColumn.c3,

.responsivelayout .zpColumnItem.c3, .responsivelayout .zp-form .c3,

.responsivelayout .zpgrid .c3, .responsivelayout div.zpRow .zpColumn.c4,

.responsivelayout .zpColumnItem.c4, .responsivelayout .zp-form .c4,

.responsivelayout .zpgrid .c4, .responsivelayout div.zpRow .zpColumn.c5,

.responsivelayout .zpColumnItem.c5, .responsivelayout .zp-form .c5,

.responsivelayout .zpgrid .c5, .responsivelayout div.zpRow .zpColumn.c6,

.responsivelayout .zpColumnItem.c6, .responsivelayout .zp-form .c6,

.responsivelayout .zpgrid .c6, .responsivelayout div.zpRow .zpColumn.c7,

.responsivelayout .zpColumnItem.c7, .responsivelayout .zp-form .c7,

.responsivelayout .zpgrid .c7, .responsivelayout div.zpRow .zpColumn.c8,

.responsivelayout .zpColumnItem.c8, .responsivelayout .zp-form .c8,

.responsivelayout .zpgrid .c8, .responsivelayout div.zpRow .zpColumn.c9,

.responsivelayout .zpColumnItem.c9, .responsivelayout .zp-form .c9,

.responsivelayout .zpgrid .c9, .responsivelayout div.zpRow .zpColumn.c10,

.responsivelayout .zpColumnItem.c10, .responsivelayout .zp-form .c10,

.responsivelayout .zpgrid .c10, .responsivelayout div.zpRow .zpColumn.c11,

.responsivelayout .zpColumnItem.c11, .responsivelayout .zp-form .c11,

.responsivelayout .zpgrid .c11, .responsivelayout div.zpRow .zpColumn.c12,

.responsivelayout .zpColumnItem.c12, .responsivelayout .zp-form .c12,

.responsivelayout .zpgrid .c12 {

width: 100% !important

}

.responsivelayout .zp-form.zp-editable .resizablefield input, .responsivelayout .zp-form.zp-editable .resizablefield textarea {

max-width: none !important

}

.responsivelayout .zpSpacer {

clear: both

}

.responsivelayout .zpSpacer.hor {

display: none

}

}

</style>

<style>

#slider .slides > li > img {

height: auto !important;

}

</style>

Zitat von Steffen T.

Probier mal so:

CSS

<style>
#slider .slides li img {
    height: auto !important;
}
</style>

Hat geklappt tausend dank

Zitat von Steffen T.

Probier mal so:

CSS

<style>
#slider .slides li img {
    height: auto !important;
}
</style>

Moin, habe gerade gemerkt, das es "Nur" bei Desktop und Tablet Ansicht geklappt hat - Bei Responsive gibt es nur ein halbes Bild.

Habt Ihr noch eine Anpassung für den Slider im Header bzgl. Responsive??

Ab einer bestimmten Breite bzw. je enger "hüpft" der Text aus dem Bild - siehe Anhang

Besten Dank

Andy

Zitat von Steffen T.

Ersetzen Sie das CSS mal durch folgendes:

CSS

<style>
@media (min-width: 641px) {
    #slider .slides li img {
        height: auto !important;
    }
}
</style>

Moin, jetzt geht es bei "Tablet und mobil", aber bei Desktop ist das Bild gestreckt und halb.

vg

Andy

ok-danke