Bild Darstellung im Footer Bereich

1. offizieller Beitrag

    Hallo Zusammen, ich baue gerade meine Webseite und habe ein Problem und zwar möchte ich das Logo in der Kopfzeile anders als in der Fußzeile haben. (Das ist laut meines Wissens nicht so einfach möglich) Jetzt habe ich versucht das ganze über ein separtates Bild zu gestalten. Wenn ich Bilder im Footer einfüge habe ich jedoch bei der Smartphone ansicht ein Überdeminsionales Bild im Footer. Kann man das anpassen? Damit es von der Größe so klein Bleibt wie bei der Desktop Version?

    Vielen Vielen Dank Euch !

    • Offizieller Beitrag

    Hallo,

    das sind etwas wenig Details um helfen zu können.

    Wir helfen Ihnen gerne! Bitte helfen Sie uns Ihr Problem genau zu verstehen, indem Sie folgende Hinweise beachten:

    Wenn Sie Fehler / Probleme melden oder Fragen haben, seien Sie bitte so spezifisch wie möglich. "Funktioniert nicht" ist zum Beispiel für uns sehr schwer einzuschätzen. Wir wissen nicht, was Sie erwarten haben und was Sie getan haben, um das Erwartete zu erreichen. Es ist daher notwendig, alles genau zu beschreiben:

    Welche Zeta Producer Version nutzen Sie?
    Welches Layout nutzen Sie? Z.B.: "Smart Responsive" (Hilfe > Programminfo > Support-Informationen)
    Was möchten Sie erreichen?
    Wie sind Sie dazu vorgegangen? Beschreiben Sie Schritt für Schritt, welche Arbeitsschritte Sie in Zeta Producer durchgeführt haben.
    Welches Resultat haben Sie erwartet?
    Was ist stattdessen passiert?
    Wie ist die URL zur Website des veröffentlichten Projekts (falls vorhanden)?
    Falls etwas falsch aussieht, zeigen Sie uns das anhand eines Screenshot und teilen Sie uns die direkte URL der entsprechenden Seite mit.
    Falls Sie eine Fehlermeldung erhalten, nutzen Sie die im Fehlerdialog enthaltene Option uns den Fehler zu berichten (unten links auf den Pfeil klicken). Alternativ klicken Sie die Option "Fehlerdetails" an posten den Text hier. Nur so erhalten wir genügend Details zur Fehlermeldung.

    Hallo zusammen,
    ich arbeite mit Zeta Producer 16.6.0.0 und dem Layout Campfire Responsive. Ich möchte im Footer ein eigenes Logo/Bild anzeigen (anders als das Logo im Header). Das Bild sieht auf Desktop korrekt aus, wird aber in der Smartphone-Ansicht automatisch extrem groß skaliert und nimmt fast die volle Breite ein.

    Ziel:
    Das Footer-Logo soll auch auf Mobile klein bleiben, idealerweise ähnlich wie auf Desktop (z. B. max. 120–160 px breit), ohne dass es den gesamten Footer sprengt.

    So bin ich vorgegangen (Schritte):

    1. Layout: Campfire Responsive, Version 16.6.0.0
    2. Footer im Wireframe bearbeitet.
    3. Im Footer ein Bild-Element eingefügt (Logo).
    4. Darunter/ daneben Footer Navigation (Startseite, Kontakt, Impressum, Datenschutzerklärung) und Spacer-Elemente im Wireframe.
    5. Veröffentlichung der Website.
    6. Problem tritt nur/ vor allem in der mobilen Ansicht auf (responsive Darstellung).

    Erwartetes Ergebnis:
    Footer-Logo bleibt auch auf Mobile klein (z. B. max. Breite 120–160 px) und skaliert nicht auf 100% der Spaltenbreite.

    Tatsächliches Ergebnis:
    In der Smartphone-Ansicht wird das Footer-Bild überdimensional groß (wirkt wie width:100%), dadurch ist der Footer optisch „kaputt“.

    Bisherige Versuche:

    • Ich habe versucht, das über „Eigenes CSS einfügen“ zu begrenzen (mit max-width für das Footer-Bild), aber entweder greift der Selektor nicht oder das Layout überschreibt es.
    • Sobald ich breiter auf Footer-Bilder ziele, beeinflusst es weitere Elemente, daher brauche ich eine saubere, gezielte Lösung nur für dieses Bild.

    Fragen:

    1. Gibt es im Layout Campfire Responsive eine empfohlene Vorgehensweise, Footer-Bilder auf Mobile zu begrenzen?
    2. Welche CSS-Klasse/ID kann ich in Campfire gezielt für das Footer Bild nutzen, damit es nur dieses Element betrifft?
    3. Gibt es eine Layout-Einstellung, die verhindert, dass Bilder im Footer auf 100% Breite skaliert werden?

    Vielen Dank vorab!

    • Offizieller Beitrag

    Hallo,

    danke für die Infos.

    Sie können das Footer-Logo über eigenes CSS in der Breite begrenzen. Fügen Sie bitte folgenden Code ein:

    CSS
    <style>
footer #afterfooter img.singleImage {
   max-width: 120px !important;
}
</style>

    Die 120px können Sie natürlich beliebig anpassen (z. B. 140px oder 160px), je nachdem wie groß das Logo maximal sein soll.

    Informationen zum Einfügen von eigenem CSS sowie zur Ermittlung des korrekten Selektors mit den Developer-Tools finden Sie hier: https://docs.zeta-producer.com/v16/eigenes-css-einfuegen.html

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden