Viel zu breiter Seitenhintergrund rechts in mobiler Version / Responsive
Autor: Rainer P.
Visitado 1754,
Followers 2,
Compartido 0
Hallo,
wie bekomme ich in der mobilen Version meiner Seite (Responsive) den viel zu breiten Seitenhintergrund rechts weg ?
Der Seitenhintergrund ist bei mir lediglich eingefärbt - ohne Grafiken.
Wenn man auf dem Smartphone zu weit nach links wischt, scheint die Seite gar ganz verschwunden zu sein, da dann nur noch der Seitenhintergrund zu sehen ist.
Einstellungs-technisch meine ich alles durch zu haben was nur geht.
Ob zentriert, links, rechts, an Fenster anpassen... - immer ist rechts der überdimensionierte Seitenhintergrund, der nochmal so breit ist wie die der Seiteninhalt.
Auch unter dem Mini-Footer der mobilen Version ist ein breiter Rand des Seitenhintergrunds, der da eigentlich nicht hingehört.
Publicado en
Und wo zu sehen ?
Autor
Ist noch nicht für die Öffentlichkeit gedacht...
Wenn es unabdingbar ist, müsste ich erst eine Blanko-Kopie erstellen - würd dann was dauern... soll/muss ich ?
Wäre sicher von Vorteil.
Autor
So kann man einem auch helfen :-D
Musste ja nun einiges in der Seite entfernen (was noch nicht für die Öffentlichkeit gedacht war) und siehe da - auf einmal war das Problem weg !
Habe dann ein Fehler-Ausschluss-Verfahren durchgeführt und dabei ist etwas heraus gekommen, auf das man nicht so ohne weiteres kommen kann:
Der Fehler lag nicht etwa in der "Struktur der Vorlage für Mobilgeräte", sondern, in der "Struktur der Hauptvorlage" !
(je unter Schritt 1/Template-Stil)
Und zwar habe ich meinen Header-Banner nicht unter "Template-Stil/Struktur der Hauptvorlage" eingefügt, sondern als Bild-Datei unter "Template-Gestaltung"/Reiter "Header",Button "Bild einfügen", da ich den Header-Banner nur dort zur Startseite verlinken kann (wie im Web allgemein üblich).
Dort ist es schwierig (mangels Linealen/ Hilfslinien/ Sichtbarkeitsmarkierungen) eine Grafik genau zu positionieren, da das eingefügte Bild dann auf großem freien Feld liegt und zudem zunächst stark verkleinert eingefügt wird und erst auf die tatsächliche Größe (Größen-Anzeige unter dem Feld, links) skaliert werden muss.
Und genau bei der Positionierung lag dann der Fehler ! Da muss es um wenige Millimeter gegangen sein - aufgefallen ist mir da in der Vorschau nämlich nichts (obwohl ich da sehr penibel bin) !
Man muss haargenau hinsehen ob Teile der Grafik auf dem Feld verschwinden (da ist eine unsichtbare Maske drum-herum !) und die Richtigkeit der Position mittels Vorschau genauestens überprüfen ! (In meinem Fall war das in der Vorschau, bei beabsichtigten Farbübergängen zwischen Header-Banner zu Header-Hintergrundfarbe, noch schwieriger / einfacher wurde es hingegen durch meinen anders-farbigen Seitenhintergrund.)
Sowohl der breite Seitenrand bei der mobilen Version, wie auch der dicke Rand unter dem mobilen Mini-Footer, sind seit dieser Korrektur (Neu-Einfügung des Banners und Neu-Positionierung...) weg.
Das ergab mein etwa 3-stündiges Fehlerausschlussverfahren eindeutig.
Eine weitere Fehlerquelle könnte sich daraus ergeben, wenn man in dem Feld/ auf einer Grafik, Text einfügt, wobei man, eventuell verschobenen und vergessenen, weißen oder grauen Text auf dem weiß-grauen Hintergrund-Feld kaum sieht. Das passiert auch schnell wenn man z.B. ein Bild per Rechtsklick in den "Vordergrund" holt.
Ansonsten vielen Dank für den "Anstoß" zu dem Fehlerausschlussverfahren - hätte ich so umfangreich sonst gar nicht gemacht !
Neuestes:
Heute (also einen Tag später) bin ich allerdings überrascht das der Fehler nun doch wieder auftritt !!
Nach nochmaliger Neu-Einfügung und Positionierung des Banners ist er aber sofort wieder weg. Hat es was mit der abschließenden Speicherung/Sicherung des Projektes gestern zu tun ?
Irgendwas muss da im Argen liegen...
Mal gucken wie es morgen ist. Hmmmmmm....
Vielleicht fällt jemanden noch was dazu ein.
(Ggf. kommt dann noch ein Link zur Fehler-Version/ momentan ist er ja wieder weg).
Aufgrund deines "wirklich" ausführlichen Textes, konnte ich trotzdem nicht den Fehler nachvollzeihen.
Das mit weißer Schrift auf hellem Headerfeld wissen wir und ist immer schon so gewesen.
Auch wenn man ein Bild in den Vordergrund holt und dadurch ein Text-Feld nach hinten rutscht, muss man sich eben merken, dass es dort liegt.
Wenn eine Speicherung den Fehler wieder herholt, dann nur wenn z.B. ein Abbruch des PRogramms gewesen ist und es das letzte Backup holt um das Projekt einzulesen. Ansonsten ist ein "Export des Projekts" immer eine gute Lösung das Projekt zu sichern.
Autor
Es ist zum verrückt werden.
Habe nun im Footer kurze Texte eingefügt und verlinkt, nun ist der Fehler mit den breiten Rändern wieder da und lässt sich auch nicht durch Korrekturen am Banner-Header beseitigen.
Also liegt es doch eher an den Links im Footer. Vorhin schien es der Banner zu sein, was ich wie gesagt kurzfristig wieder beheben konnte. Da waren aber die Links noch nicht wieder im Footer.
Ich habe weiter experimentiert:
Es liegt auch nicht an Text im Footer - es ist der verlinkte Text - und zwar alle die nicht im linken Viertel des Footers sind (!)
Das erinnert mich nun an das Problem mit dem Suchfeld (siehe meinen Beitrag "Suchfunktion / Suchmaschine für Responsives Design / mobile Geräte" https://helpcenter.websitex5.com/post/140968), bei dem mir Andreas mit einem Code-Schnipsel helfen konnte. Nur kann ich dieses Suchfeld auch immer nur am linken Rand positionieren !
Gäbe es da auch einen Code-Schnipsel für, damit ich mittig und rechts auch Hyperlinks auf dem Footer unterbringen kann ? Da müssen bis zu 20 rein !
Und jetzt Links zu "Blanko-Versionen" meiner Seite zum probieren:
1. Text-Links im Footer nur im linken Drittel = kein Fehler (Browserfenster verkleinern !) :
http://zoom-win.de/1190F/index.html
2. Einer der Text-Links nun in der Mitte des Footers (auf rechter Seite ist es dasselbe)
= breiter Rand rechts in mobiler Version (Browserfenster verkleinern !) :
http://zoom-win.de/1190F2/index.html
Wenn man auf dem Smartphone nach links wischt, oder nach vergrößer/verkleinern der Seite, sieht es dann so aus als sei die Seite verschwunden.
Gib noch zu dem CSS Code der einfefügt wurde folgende Zeile hinzu... (nach "block;" aber innerhalb der Klammer)
left:0!important;
Autor
Hey, das hat geholfen ! Vielen herzlichen Dank !
Autor
Für die Allgemeinheit sei noch erklärt das sich die letzte Nachricht von Andreas auf den Code zu dem oben genannten Beitrag zur Suchfeld-Problematik bezog (damit das Suchfeld nicht ab Tablet-Größe verschwindet, wenn es woanders als im Header eingefügt wird).
Der komplettierte Code lautet dann:
<style>
@media (max-width: 1189px) {
.imTemplateContent {display:block;left:0!important;}
}
</Style>
und ist einzufügen bei: Schritt 4, "Erweiterte Einstellungen"/"Statistiken, SEO und Code"/Reiter "Erweitert"/Auswahlfeld "Vor dem </HEAD> Tag".
Andreas ist der Größte !
Autor
Die Pixelzahl ("px") muss an die jeweilige eigene Seiten-Breite angepasst werden, minus 1 Pixel !
Autor
Stehe vor einem Rätsel - habe an meiner Startseite weiter gearbeitet (ein paar Texte in 2 der Tabellen raus und durch Bilddateien ersetzt (vorher waren aber auch schon 2 Bilder drin) - auf ein mal ist der breite Rand wieder da !
Kompletter Code zur Abhilfe des Problems des breiten Randes ist aber noch da !
Die Tabellen kommen auch nicht über die rechte Markierung ! Da ist sogar noch ein bischen Platz.
Am neuesten Update für Pro12 kanns nicht liegen, da eine 1 Tag ältere Sicherungs-Version der Seite noch funktioniert - also ohne das der Rand auftaucht. Nur die o.g. Bilder waren da noch nicht drin.
Habe dann folgendes versucht:
1.: Ganzen Code raus genommen (also auch den gegen das verschwinden des Suchfeldes in der mobilen Version) = Breiter Rand weg und Suchfeld in der mobilen Version natürlich auch.
2.: Ganzen Code neu rein = Suchfeld und breiter Rand wieder da.
3.: Teil-Code " left:0!important; " raus = Suchfeld und breiter Rand da.
Irgendeine der (scheinbar harmlosen) Änderungen an der Startseite scheint den Code unwirksam zu machen. (??)
Könnte nun natürlich die Bilder der Startseite irgendwie ändern (versuchen) - aber in Zukunft wird mein Projekt noch gaaaaanz viele Tabellenseiten bekommen / teils sicher auch mal mit Bildern - und das muss ja dann auch funktionieren.
Gibt´s einen anderen Code für das Problem ?
Autor
Habe nun testweise einige Bilder heraus genommen. Rand bleibt.
Guten Tag,
Leider kann ich Ihnen bei benutzerdefinierte HTML codes nicht weiterhelfen da der Support nur für funktionen des Programms verfugbar ist.
Vielen Dank!
Autor
Tja den Code-Schnipsel hatte Andreas mir genannt, da das Programm an der Stelle wohl eine Fehlfunktion hat. Wie kriege ich sonst diesen breiten Rand auf der rechten Seite in der mobilen Version weg ? Lieber wäre mir natürlich wenn ich den Fehler ohne Code von aussen beseitigen kann. Ist ja hier alles ausführlich beschrieben.
Es wäre sehr hilfreich, wenn Du deine Seite ins Inet stellen würdest, damit man Dir besser helfen kann - denn so wird das nix
Autor
Hab ich doch (siehe oben) Hab ja, am Anfang der Sache hier, extra ne Blanko-Demo-Version ohne Inhalte erstellt.
http://zoom-win.de/1190F2/
Daraufhin hatte Andreas mir den Ergänzungs-Code (zum Zufügen für den schon vorhandenen gegen das verschwindende Suchfeld) genannt, was auch zunächst Abhilfe brachte. Doch nun ist der breite Rand der mobilen Version halt wieder aufgetaucht, obwohl der Code noch korrekt drin ist.
Autor
Also in dem o.g. Link der Demo-Seite ist nur der Code zum Suchfeld-Problem (verschwindet sonst ab Tablet-Größe) drin. Nehme ich den Code raus, ist der breite Rand der mobilen Version weg, aber ich habe dann natürlich wieder das Problem mit dem Suchfeld, wie in meinem Beitrag
"Suchfunktion / Suchmaschine für Responsives Design / mobile Geräte" https://helpcenter.websitex5.com/post/140968
geschildert. Vielleicht sollte man sich dann lieber diesem Problem widmen.
Autor
Ich habe zu dem Suchfeld-Problem daher nochmal eine neue Demo hochgeladen:
http://zoom-win.de/1190F3/
Das ist jetzt völlig ohne externen Code !
Kann ja irgendwie nicht angehen das man ab Tablet-Größe keine Suchfunktion mehr hat.
Auch das das Suchfeld nur im Header-Banner sein darf ist nicht so toll.
Wenn das gelöst würde, brauche ich auch den externen Code für das Suchfeld nicht und habe kein Problem mit dem breiten Rand, der offenbar (??) durch den Code kam. (Zunächst klappte das aber ja sehr gut)
Autor
Habe weiter experimentiert: Wenn ich den Link aus dem Banner im Header heraus nehme ist der Fehler mit dem breiten Rand weg. Trotz komplettem Code.
Morgen mache ich weiter... (das ist der wohl konfuseste Beitrag des Jahres... - sorry - aber mal gucken was ich noch so herausfinde)
Autor
Also beim Banner im Header (in meinem Fall eingefügt unter Schritt 1/Template-Gestaltung, um überhaupt verlinken zu können), ist es das selbe wie zuvor im Footer (siehe oben): Ist der Banner verlinkt (zur Startseite = Web-Standard) kommt in der mobilen Version der breite Rand rechts.
Genauso wie beim Footer ist es auch bei Text auf dem Banner (also wenn der Banner selbst nicht verlinkt ist): im linken Viertel kann ich verlinken, in den 3 Vierteln rechts daneben geht es nicht, dann kommt wieder der breite Rand !
Gibt es eine weitere Code-Ergänzung für den Banner im Header ?
Bis jetzt sieht dieser (gegen das verschwinden des Suchfeld, plus Ergänzung um den Footer verlinken zu können) so aus:
<style>
@media (max-width: 1189px) {
.imTemplateContent {display:block;left:0!important;}
}
</Style>
Zusätzl. Erläuterung für Incomedia:
Auf den Code für das Suchfeld kann ich nicht verzichten, da es Web-Standard ist das Suchfeld auf der rechten Seite oben unter dem Banner zu haben. Bei X5 geht es offenbar nur auf der linken (ohne in der mobilen Version zu verschwinden) und dazu nur störend IM Header-Banner. (Siehe mein Beitrag "Suchfunktion / Suchmaschine für Responsives Design / mobile Geräte" : https://helpcenter.websitex5.com/post/140968
den ich leider nicht mehr nach-bearbeiten kann (?!))
Link zur Testseite wg. Suchfeld-Problem OHNE jeden eingefügten Code:
http://zoom-win.de/1190F3/
Ich bitte Incomedia um Abhilfe zu dem Suchfeld-Problem damit ich nicht, durch dadurch notwendige Code-Einfügungen, möglicher Weise andere Probleme in X5 bekomme.