Contemporary Responsive scheint nicht auf Mobilgeräten korrekt angezeigt zu werden

Eigentlich nicht. Beispiel? Welches Mobilgerät mit welchem OS und welchem Browser nutzen Sie, wenn Sie das "springen" beobachten?

Hallo,

mit Beispiel meinte ich einen Link zur betreffenden Seite…

Moin Stefan,

bei dem Rick, geht es um die Seite: https://community.zeta-producer.com/www.hp-mosaik.de
Wobei ich da der Meinung bin (was jetzt das Logo angeht), das dies einfach zu viel groß dimensioniert ist, für das verwendete Layout,
und daher der obere Bereich "durcheinander" kommt.

Hallo,

dass z.B. ersten beiden kleineren, roten Überschriften auf http://www.hp-mosaik.de untereinander gezeigt werden, wenn der Bildschirm schmal wird, liegt daran, dass Sie die beiden Überschriften falsch angelegt haben.

Sie haben die beiden Überschriften als 2 Spalten in einer Reihe und darunter dann 2 Bilder in einer Reihe gefolgt von 2 Text-Spalten in einer Reihe.

Sie können das so korrigieren:

• Verschieben Sie in ZP das Bild der 1. Spalte auf die 1. Überschrift und lassen Sie die Maus los.
• Nun sehen Sie 6 Icons. Klicken Sie auf das 2. Icon von unten (Element darunter einfügen - das Unterste wäre Element in neuer Reihe darunter einfügen)
• Verschieben Sie nun den Textblock der 1. Spalte auf das Bild der 1. Spalte
• Nun sehen Sie 6 Icons. Klicken Sie auf das 2. Icon von unten (Element darunter einfügen - das Unterste wäre Element in neuer Reihe darunter einfügen)
• Verfahren Sie mit der 2. Spalte genauso.

In Contemporary Responsive werden logos nicht automatisch verkleinert. Das ein Logo derart groß gewählt wird, erscheint uns auch eher ungewöhnlich. Für Ihre Website würde ich eine Abwandlung des Logos ohne Schrift vorschlagen. Nur der Teil mit dem Kleeblatt. Da würde dann eine Breite von ca. 80 Pixeln vollkommen ausreichen und das würde dann auch auf einer Zeile mit dem menü dargestellt werden. Zudem würden Sie auf der Startseite das "Herzlich Willkommen!" durch "Naturheilpraxis Mosaik" ersetzen (das wäre auch Text, der von Google gesehen wird).

Ich denke, das Logo als Wort-Bild-Marke wird von Ihnen ja auch genutzt. Z.B. auf Visitenkarten, Praxisschild, Briefbogen etc. Nu weil Sie auf der Website eine Variante nutzen würden, sollte der Schutz deshalb nicht beeinflusst werden. Aber ich bin kein Patentanwalt. Selbst wenn Sie das Logo so nutzen, wie bisher, gibt es meiner Meinung nach keinen Grund es so groß zu zeigen, wie Sie das momentan tun.

Wenn "Layout-Anpassen" im Logo-Dialog nicht korrekt funktioniert, klicken Sie einfach als Workaround direkt auf den Button "Layout".

Nur über entsprechenden individuellen CSS-Code.

Hallo Rick,

ich an deiner Stelle, würde evtl. mal über einen Layoutwechsel nachdenken.

Schau dir mal folgendes an: http://hosting.zeta-producer.com/3286621921/index.html
Das ist das Layout "Smart Responsive".
Ich finde das dies wesentlich besser passen würde.

Und vor allem schau dir mal die Darstellung auf mobilen Geräten dazu an.
In diesem Layout passt sich das Logo sauber an.

Kannst ja mal eine Kopie deines Projektes machen, und dann damit "rumspielen".

Vielleicht wäre das ja was für dich?

Naja, ist schon mit ein wenig Aufwand verbunden, was das Layout betrifft (die Inhalte, wie Text und Bilder, werden ja übernommen).

Ich würde wie gesagt eine Kopie deines jetzigen Projektes machen, und in diesem dann den Layoutwechsel vollziehen.
Und dann zunächst das ganze erstmal ausgiebig testen.
Also die Ansicht mobil und Desktop, passen die anderen Anordnungen, wie z.B. (wenn vorhanden) Untermenü und alles was so dazugehört.

Und wenn das alles in Ordnung ist, dann erst das Projekt fertig aufbauen bzw. "feintuning" betreiben.
Zwischendurch aber immer wieder die Ansicht kontrollieren

Naja, ich umschreibe es jetzt mal so "jedes Layout bietet seine Vor-, und Nachteile" (daher auch die große Auswahl).
Das Layout "Smart" ist halt besser dafür ausgelegt, solch große Logos anzuzeigen.
Und dein verwendetes Layout, ist halt nicht für den Einsatz von solch großen Logos ursprünglich von Zeta dafür ausgelegt worden.
Daher wäre es in dem Layout, halt nur durch "individuelles CSS" möglich.

Hallo Rick,
wie bereits erwähnt, das verspringen der Seite liegt nicht am Layout sondern an irgend etwas was du eingefügt hast. Eventuell mal probieren verdächtige Artikel (zB. Fremdcode) testweise zu deaktivieren.

Ich hatte dir ja versprochen mir wegen der Skalierung des Logos etwas zu überlegen.
Hier die TESTSEITE dazu.

Setze die Größe des Logos im Layout-Designer auf 1x1 Pixel.
Gehe zu Einstellungen > Elemente und nimm den Haken bei "Logo anzeigen) raus.

Mit einem externen FTP-Programm dein Logo hochladen (Anleitung dazu)

Dann Eistellungen > CSS und dort folgendes einfügen

<style>
.platz-schaffen {
width:100px;
height: 140px;
}
@media (max-width: 979px) {
.platz-schaffen {
height: 50px;
}}
@media (max-width: 600px) {
.platz-schaffen {
height: 25px;
}}




.llogo {
position: absolute;
top:15px;
margin-left:-336px;
left:50%;
width:672px;
height: 169px;
z-index:70000;
}
@media (max-width: 979px) {
.llogo {
width:450px;
height:113px;
margin-left:-225px;
}}
@media (max-width: 600px) {
.llogo {
width:300px;
height:75px;
margin-left:-150px;
}}
</style>

Jetzt in Zeta oben rechts Einfügen auf an stellen.
Nun ganz oben (Banner) einen neuen Artikel "Quelltext" mit folgendem Inhalt erstellen.

<div class="platz-schaffen"> 
</div>
<div class="llogo"> 
<a href="http://www.hp-mosaik.de/" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/bilder/mosaik.png"></a></div>

Die Verlinkung zu deinem zuvor hochgeladenen Logo anpassen.

Es kann sein das die Darstellung in der Zeta-Vorschau nicht ganz korrekt ist. Einfach die Browservorschau nutzen.

Getestet in Chrome, Firefox, IE und Galaxy S6

Hallo zusammen,

ja mensch, der gute alte (Teaser) "Banner", das is doch der bringer in dem Fall

Aber würde es nicht schon ausreichen, wenn man einfach im Banner nur ein Widget "Bild" mit dem Logo einfügt, und das dann auf allen Seiten anzeigen lässt?
Ich hab das eben auf die schnelle mal versucht, und das hat einen sehr guten Eindruck hinterlassen.

@ Mario: Oder übersehe ich da gerade auf die schnelle was?

Was mir daran nicht gefällt ist der Abstand zum Menü. Wobei es in diesem Layout noch akzeptabel ist. Somit sicher der einfachste Weg einfach ein Bild im Banner einzufügen.

Ich hatte das damals auf meiner Seite auch probiert, aber in "Producer Responsive" hatte ich immer Riesengroße Anstände. Deshalb habe ich das hier erst gar nicht probiert.
Aber der Test gerade zeigt das dies ein durchaus gutes Ergebnis liefert. Somit einfach umzusetzen mit gutem Ergebnis. Jochen da hast du recht.

Normalerweise füge solchen Code immer in die Fußzeile. Der Banner wurde hier eigentlich nur benutzt um den erforderlichen Platz zu schaffen. So kommt wieder eines zum anderen...

Also Rick einfach mal das Logo löschen und dann als Bild im Banner einfügen. Einfach und Gut! Im Banner dann noch unten auf das Mischpult "auf allen Seiten anzeigen".

@ Rick: Du kannst dir mal folgendes ansehen: http://hosting.zeta-producer.com/3287931222/index.html
In diesem Test, habe ich dein Logo jetzt als Beispiel mal, als Bild im Bannerbereich in ein Textwidget eingefügt und dieses dort dann auch gleich "zentriert".
Du kannst es auch als Bild-Widget einfügen, aber dann hängt es halt ein wenig mehr links, so wie du es jetzt auch auf deiner Webseite hast.
Wenn das so von dir gewünscht ist, dann nimm das Bild-Widget, wenn nicht dann das Text-Widget.

Kannst es dir ja mal anschauen und vor allem austesten, ob du so damit einverstanden bist, was auch die mobile Darstellung betrifft.

Wäre so eigentlich die einfachste Lösung.

@ Mario: Danke für den "Denkanstoß"

Super Idee Jochen!

Dann teste diese Variante,

Einstellungen > CSS hier folgendes einfügen:

<style>
.platz-schaffen {
width:100px;
height: 140px;
}
@media (max-width: 979px) {
.platz-schaffen {
height: 50px;
}}
@media (max-width: 600px) {
.platz-schaffen {
height: 25px;
}}




.llogo {
position: absolute;
top:15px;
margin-left:-336px;
left:50%;
width:672px;
height: 169px;
z-index:70000;
}
@media (max-width: 979px) {
.llogo {
width:450px;
height:113px;
margin-left:-225px;
}}
@media (max-width: 600px) {
.llogo {
width:300px;
height:75px;
margin-left:-150px;
}}
</style>

Dann im Bannerbereich das Widget Quelltext mit folgendem Inhalt

<div class="platz-schaffen"> 
</div>
<div class="llogo"> 
<a href="http://www.hp-mosaik.de/" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/bilder/mosaik.png"></a></div>

Hallo,

kurz nachgefragt:
Zwischen Menüzeile und Header, oder zwischen logo und Menüzeile?
Und mobil oder Desktopansicht?

Und kannst du dieses Problem auch auf meiner zuletzt veröffentlichten Textseiten sehen?

Ich bin mir sicher das du da irgend einen Code drin hast der das verschieben verursacht. Du solltest mal den ganzen Fremdcode testweise deaktivieren.