Falsche Skalierung

pomerodi1971

Hallo,

hoffentlich habe ich mit der Überschrift das Problem getroffen.

Wenn ich meine Website in verschiedenen Größen teste, habe ich das Problem, dass die Hinweisboxen an der rechten Seite nicht das machen, was ich erwarte.

Das bedeutet, wenn ich die Seite verkleinere, wird schön skaliert und "plötzlich" poppen die Hinweisboxen wieder groß auf, was optisch ein Desaster ist.

Dieses passiert genau bei einer Seitenbreite unter 769 pixel. Wenn man dann noch kleiner wird, ist der Text im "Hauptbereich" der Seite unansehnlich.

Ich habe schon alle CSS Geschichten von mir gelöscht, aber daran lag es nicht.

Anbei 2 Links. Bei Link 1 funktioniert alles, wie erwartet (aber genau an dieser Stelle passiert was, da ich eine leichte Verschiebung der Hinweisboxen bemerke...aber sie werden nicht wieder "groß").

So sollte es sein...

http://www.angel-tipps.de/test2/stonfo-h…-anleitung.html

So ist es

http://www.angel-tipps.de/test3/stonfo-h…-anleitung.html

Ich hoffe, dass es etwas Einfaches ist und an mir liegt...

Danke schon im Voraus.

Sascha

Stefan S

Hallo,

test2 wurde mit Version 14.1 erstellt, test3 mit Version 14.3. Seit Version 14.2.1 haben wir das Grid-System leicht geändert, damit es noch flexibler wird und nicht gleich von mehrspaltiger auf einspaltige Anzeige umspringt.

In test2 springt die Darstellung ja irgendwann auch auf einspaltig um und dann sind die Hinweisboxen sehr groß. In test2 springt es zunächst auf zweispaltig (beide Spalten gleich breit) und dann erst später auf einspaltig. Würde es nicht auf zweispaltig springen, wären die Hinweisboxen ja ohnehin viel zu schmal um den Inhalt noch vernünftig lesen zu können.

pomerodi1971

Hallo,

Test 2 mit 14.1 erstellt und Test3 mit 14.3 ist nur bedingt richtig... Ich bin mit 14.1 gestartet und habe die Updates gemacht. Mir war da nicht bewusst, dass sich die Änderung so auswirkt.

Mein Ziel ist es, dass die Hinweisboxen nur kleiner werden und dann nach unten versetzt werden und nicht durch Sprünge im Grid-System wieder groß werden.... Das schien ja in der 14.1 zu klappen.

Was die Größe der Hinweisboxen angeht, hatte ich eine Mindestgröße vorgegeben (im CSS... Nicht im Beispiel enthalten) und wenn diese unterschritten wurde, sollten die Boxen halt nach unten springen.

Diesen Teil im CSS brauche ich nicht wieder einzustellen, denn damit erreiche ich nun, dass der Text links zum "Vertikal Text" mutiert...

Na ja... "Feind" erkannt ist das Wichtigste...

Danke.

pomerodi1971

Hallo,

auch wenn ich die Ursache nun erkannt habe, komme ich nicht weiter.

Ich habe mein Projekt daraufhin ausgerichtet, dass der Hauptartikel auch beim verkleinern der Hauptartikel bleibt. Er ist 3x so groß wie die Hinweisbox am Rand und soll nicht bei einem "breakpoint" plötzlich "gleichberechtigt" neben der Hinweisbox stehen, sondern unter den Hauptartikel stehen.

Somit ist das Umschalten auf 2-Spaltig, statt auf 1-Spaltig für meine Idee völlig kontraproduktiv.

Was kann ich machen, um wieder "direkt" auf 1-Spaltig zu springen? Zurück zur 14.1 sollte allerdings nicht die Antwort sein...

Ich bin auch offen für alternative Lösungen.

Fakt ist, sowas, wie im Anhang zu sehen, geht gar nicht...

wurzelsepp

Moin Sascha,

mal so nebenbei; du schreibst dass du die Businessversion im Einsatz hast. Angezeigt wird aber die Homeversion.

Bitte mal noch die Lizenznummer eintragen.

Stefan S

Was Sie möchten, wäre in Ihrem speziellen Fall, bezogen auf die aktuelle Spaltenbreite mit folgendem, angepasstem CSS (große Spalte 65% Breite, kleine Spalte 35% Breite und ab 479px Bildschirmbreite dann 1-Spaltig) möglich:

Klicken Sie im Menü Website auf "Einstellungen"
Klicken Sie auf CSS
Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"

CSS

<style>
@media (max-width: 768px){
    .responsivelayout div.zpRow .zpColumn.c2{
        width: 35% !important;
    }
    .responsivelayout div.zpRow .zpColumn.c10{
        width: 65% !important;
    }
}
@media (max-width: 479px){
    .responsivelayout div.zpRow .zpColumn.c2{
        width: 100% !important;
    }
    .responsivelayout div.zpRow .zpColumn.c10{
        width: 100% !important;
    }
}
</style>

Alles anzeigen

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

pomerodi1971

Hallo,

wahrscheinlich hast du nur den ersten Link inspiziert...

Wenn du den aktuellen Link anklickst, siehst du auch die Businessversion.

wurzelsepp

ich hab einfach diese Seite genommen:

http://www.angel-tipps.de/

pomerodi1971

Hallo,

der Code ist genau das, was ich mir erhofft habe.

Phantastisch... Den passe ich noch etwas genauer an und dann habe ich genau das, was ich mir wünsche.

Vielen Dank

Sascha

pomerodi1971

Zitat von wurzelsepp

ich hab einfach diese Seite genommen:

http://www.angel-tipps.de/

Die dient nur als Platzhalter, bis ich irgendwann mal online gehe....

Das ist die aktuellste Version, die ich bislang hochgeladen habe... http://www.angel-tipps.de/test3/die-besten-spinnrollen.html

Ich habe noch viel Arbeit vor mir

Falsche Skalierung

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?