Header / Slider Skalierung

  • Hallo,

    erstmal ein kurzes Feedback. Zeta Producer ist wirklich ein gelungenes Programm...

    ...doch leider will es nicht so wie ich will. Ich hoffe es kann mir jemand helfen:

    In meinem Projekt, erstellt mit dem Template Technical Responsive, habe ich leider auf der mobilen Seite ein paar Darstellungsfehler. Der erste betrifft die Skalierung im Header / Slider. Bei der Desktop Version sieht alles gut aus, doch bei Smartphones ist der Slider einfach viel zu klein im Vergleich zu den anderen Bildern. Die breiten Bilder passen einfach nicht in die Hochformatsauflösung. Daher würde ich gerne wissen wie ich die Breite bei Smartphones eingrenzen kann. Auch wenn das Bild dann nicht komplett dargestellt wird.

    Zum anderen würde ich gerne wissen wie man das Logo fixieren kann. Ich habe es mal mit CSS probiert, doch es hat nicht geklappt...

    Hat da jemand eine Lösung: Seite : http://www.md-itss.de/preview_www/

    Danke für jede Antwort..:-)

  • Hallo,

    die Breite der Kopfgrafik kann in diesem Layout nich einfach für die Darstellung auf kleinen Bildschirmen verändert werden. Andere Layouts reagieren hier evtl. etwas cleverer – sehen Sie sich doch z.B. mal "Stripe Responsive" an.

    Wenn Sie sich mit CSS auskennen, können Sie natürlich fast alle Wünsche erreichen indem Sie eigenes CSS einfügen. Per CSS werden Elemente mit position: fixed; fixiert, in ihrem Fall also ungefähr so:

    Code
    <style>
    div#banner{
    position: fixed;
    z-index: 100;
    }
    </style>

    Das bringt aber einige Implikationen mit sich und es müssen bestimmt noch andere Dinge justiert werden, damit das mit dem fixierten Logo auch eine ordentliche Usability hat (z.B. dem body eine padding-top geben, die so hoch ist wie der Banner…).

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo,

    vielen Dank für die schnelle Hilfe. Mit CSS kenne ich mich leider nicht aus.

    Leider skalieren ALLE Templates bei dem Slider bei mir. Was natürlich eigentlich richtig ist, man will ja im Normallfall das komplette Bild sehen.

    Das Stripe Responsive gefällt mir sehr gut. Bis auf die die Navi Leiste. Die muss in der Mitte sein. Bekommt man die in die Mitte? Dann steige ich um...:-)

    Ich probiere das mal aus und gebe eine Rückmeldung.


    MFG

  • hmm, ich habe das jetzt reingesetzt. Das wollte ich so, nur über dem Header. Wissen Sie wie ich das anpassen kann?

  • Hallo nochmal,

    das mit dem Logo fixieren bekomme ich dann hin. Problematisch bleibt das mit dem skalieren. Die Sliderbilder sind nunmal im Breitbild Format. Auf dem Smartphone wird es immer falsch dargestellt. Unabhängig vom Template!

    Gibt es eine Möglichkeit die Breite auf Smartphone zu begrenzen? Ich habe mal gesehen das jemand einen CSS Code "max-width" eingegeben hat im mobile Script. Wäre das eine Möglichkeit?

  • Was Sie hier möchten, ist sehr schwer, denn Sie können das Bild ja auch nicht einfach irgendwo nach X Pixeln rechts abschneiden um ein Hochformat zu erhalten. Sie möchten ja sicher entsprechend wichtige Bildinhalte auch auf dem Smartphone zeigen und nicht zufällig abschneiden. Daher Zeigen die meisten Layouts eben das volle Bild im selben Format wie auf dem Desktop. Ich wüsste da auf die Schnelle auch keine Lösung.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Eigentlich war das mein Gedankengang, der auch in Ordnung wäre. Also von beiden Seiten jeweils "einfach" das überflüssige wegschneiden...

    Ich wundere mich nur das sich noch scheinbar niemand darüber geäußert hat. Die meisten Header / Slider sind doch im Querformat, was letztlich immer zu dieser Problematik führt. Wenn Sie die Seite anschauen, fällt sofort auf das der Header viel kleiner ist als alle anderen Bilder. Die Proportion passt nicht. Bedauerlicherweise hat auch eine Umstellung auf ein anderes Design nichts bewirkt...Trotzdem danke für Ihre Mühe!

  • Hallo nochmal,

    ich habe nun herausgefunden woran es liegt:

    Die Header sind bei uns sehr hoch aufgelöst und breiter als bei vielen anderen. Reduziere ich die Auflösung, werden die Header auch mobil größer dargestellt.
    Allerdings ist das noch keine Lösung.

    Ansatz wäre hier bei mobilen Geräten eine reduzierte Auflösung zu nehmen, bei der Desktop Version die höhere.

    Weiß hier jemand weiter?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!