Responsive Verhalten der Webseite

Hallo,

bitte verraten Sie uns noch, welche Zeta Producer Version Sie nutzen und welches Layout Sie gewählt haben.
Tipps zum Verfassen von Anfragen finden Sie hier.

Hallo,

was sie mit blauem Hintergrund meinen, kann ich ohne einen Link auf die entsprechende Website oder einen Screenshot leider nur vermuten.
Bei diesem Layout wird bei der Darstellung auf kleinen Bildschirmen die Hintergrund-Farbe (und der radiale Verlauf) hinter den Kopfgrafiken entfernt, da auf schmalen Bildschirmen ja nur ein sehr geringer Bereich, rechts und links der Kopfgrafik sichtbar ist. Ebenso wird auf kleinen Bildschirmen der Text, der sonst über der Kopfgrafik liegt, nach darunter verschoben.
Dieses Verhalten kann nicht verändert werden.

Kopfgrafiken erscheinen, nachdem alle im Header verwendeten Bilder geladen sind (ich vermute, Ihr Header enthält mehrere Kopfgrafiken). Je nach Anzahl der verwendeten Bilder, kann es daher zu verzögerungen der Anzeige kommen, so lange der Browser noch die Bilder lädt.

Im nächsten Update zu Zeta Producer 12 haben wir das für einige Layouts so optimiert, dass nur noch gewartet wird, bis das erste Bild geladen ist. Für Version 11 können wir hier aber leider keine Updates mehr anbieten.

Hallo,

herzlichen Dank. Das hilft sehr! Bei diesem Layout geht ja das Bild über die gesamte Breite des Headers und der Text des Headers liegt über dem Bild. Ihr Bild hat transparente Bereiche, daher ist der Text dann bei Bildschirmbreiten von < 768px nicht mehr zu sehen und es sieht in der Tat eigenartig aus. Das ist im Layout-Editor so nicht anzupassen. Ich habe aber einen einfachen Workaround für Sie;

• Klicken Sie im Menü Website auf "Erweitert > Attribute"
• Stellen Sie sicher, dass unten links im Button "Attribute" die Option "Alle anzeigen" angehakt ist
• Doppelklicken Sie nun in der Liste der Attribute unter "Standard" auf das Attribut "mobile_script"
• Fügen Sie folgenden Textzeilen ein und schließen Sie den Dialog dann mit Klick auf "OK"

<style>
@media screen and (max-width: 768px){
	div#header{
		background: #val(header-background-color);
		background: -moz-radial-gradient(center, ellipse cover,  #val(header-background-color) 0%, #val(header-background-color2) 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#val(header-background-color)), color-stop(100%,#val(header-background-color2)));
		background: -webkit-radial-gradient(center, ellipse cover, #val(header-background-color) 0%,#val(header-background-color2) 100%);
		background:      -o-radial-gradient(center, ellipse cover, #val(header-background-color) 0%,#val(header-background-color2) 100%);
		background:     -ms-radial-gradient(center, ellipse cover, #val(header-background-color) 0%,#val(header-background-color2) 100%);
		background:         radial-gradient(ellipse at center,     #val(header-background-color) 0%,#val(header-background-color2) 100%);	
	}
}
</style>

Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

Hallo,

sorry. Mein Fehler. Ich hatte Ihnen Producer 12.5 kompatiblen Code geschickt, (#val() statt #text()) der geht natürlich in 12.2 nicht Hier nun der korrekte Code:

<style>
@media screen and (max-width: 768px){
    div#header{
        background: #text(header-background-color);
        background: -moz-radial-gradient(center, ellipse cover,  #text(header-background-color) 0%, #text(header-background-color2) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#text(header-background-color)), color-stop(100%,#text(header-background-color2)));
        background: -webkit-radial-gradient(center, ellipse cover, #text(header-background-color) 0%,#text(header-background-color2) 100%);
        background:      -o-radial-gradient(center, ellipse cover, #text(header-background-color) 0%,#text(header-background-color2) 100%);
        background:     -ms-radial-gradient(center, ellipse cover, #text(header-background-color) 0%,#text(header-background-color2) 100%);
        background:         radial-gradient(ellipse at center,     #text(header-background-color) 0%,#text(header-background-color2) 100%);    
    }
}
</style>