Verwendung: ONE - Home - Header - Main Slider - Bilder responsive?

jochen.kubik's Avatar

jochen.kubik

16 Nov, 2018 09:29 AM

Produkt: Oneo Contao
Contao-Version: 4.6.3
Browser und Browserversionen: alle

Hallo RS-Team,
ich habe bei der Befüllung des Themes "ONEO" zwei kleinere Probleme.
Hier der Link zur Seite:
http://www.ofenbau-rieger.de/
Im Detail geht's um folgende 2 Fragen:

1.) Der Main-Slider auf der Homeseite nimmt ja die ganze Höhe des zur Verfügung stehenden Monitors ein, bis auf die unten stehende Navigation.
Mir ist klar, dass je nach Viewport, die Bilder entsprechend verkleinert werden müssen.
Ich habe hier 4 Bilder die jeweils 2600x1463 px Größe haben und ein Video mit 1280x720px eingefügt.
Ich habe das Gefühl, dass der Slider so designt ist, dass er immer die Höhe des Viewports minus die Navigation einnimmt. Kann dies geändert werden, damit die Bilder ganz dargestellt, und dafür lieber etwas vom Inhalt unter der Navigation in den Viewport rutscht? Wir schneiden sonst auf manchen Monitoren die Logos der Hersteller ab. Bei der Betrachtung auf einem mobilen Device ist das anders, hier hbaen die Bilder eine gwisse höhe, Das Video wird aber sehr hoch dargestellt, das würde ich auch gerne ändern.

2.) Die Unterseiten der Kategorie "Produkte" basieren auf Ihrer Vorlage "Service & Skills" hier habe ich Probleme mit der Bildgröße in der "Tagline" ich würde hier gene eine Bildgröße definieren. Das ist zwar über das normale CE Bild möglich, hat aber keinen Einfluß auf die Darstellung auf der Wenseite. Wie kann ich hier eine einheitlich gleiche Höhe oder Breite der Bilder erreichen?
Vielen Dank für Ihren Support
Jochen Kubik

  1. Support Staff 1 Posted by RockSolid Theme... on 16 Nov, 2018 02:28 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Fragen.

    Die Höhe des Sliders auf der Startseite würd über CSS geregelt. Sie können ein festes Seitenverhältnis erreichen indem Sie folgenden Code in die Datei files/oneo/css/custom.css einfügen:

    .main-slider {
        height: calc(100vw * 1463 / 2600);
    }
    @media screen and (max-width: 599px) {
        .main-slider {
            height: auto;
        }
    }
    

    Alternativ können Sie die Größe des Sliders auch am Inhalt ausrichten lassen:

    .main-slider {
        height: auto;
    }
    

    Die Bilder der Produktseiten werden bereits alle in derselben Breite (50%) dargestellt da sie jeweils innerhalb eines Spaltenumschlags platziert wurden. Können Sie uns einen Screenshot senden der zeigt wie die gewünschte Darstellung aussehen würde?

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac