Fehler: Slider und Menü in Contao 4.9.10 nicht RESPONSIVE

Marco's Avatar

Marco

29 Jan, 2021 01:11 PM

Produkt: Tao Contao
Contao-Version: 4.9.10
Browser und Browserversionen: Firefox, Chrom ...

Leider wird der Slider beschnitten und das Menü schiebt sich unter das Logo, wenn man mit einem Tablet die Seite besucht.
Ich habe auch schon Updates durchgeführt und leider unter den anderen Tickets nichts passendes und Aktuelles gefunden.
Hätten Sie hierfür ein Lösung?
danke

  1. Support Staff 1 Posted by RockSolid Theme... on 29 Jan, 2021 03:02 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

    @media (max-width: 1024px) and (min-width: 901px) {
        .main-navigation > ul > li > a, 
        .main-navigation > ul > li > strong, 
        .main-navigation > ul > li > span.active, 
        .main-navigation > ul > li > span.trail, 
        .main-navigation > ul > li > span.forward {
            padding-right: 0.5em;
        }
    }
    .main-slider {
        height: calc(455 / 2000 * 100vw);
    }
    

    Damit sollte sich die gewünschte Darstellung umsetzen lassen.

    Bei dem Slider können Sie anstatt der .main-slider-Angabe im CSS alternativ auch die Höhe des Sliders auf 2000x455 einstellen.

  2. 2 Posted by Marco on 29 Jan, 2021 09:22 PM

    Marco's Avatar

    Bei dieser Seite hat es geklappt, bei einer weiteren nicht.
    Dort versuchen wir gerade mit dem Selben Tao alles einzustellen, do hier haben wir weiterhin den Fehler.
    Zusätzlich verschwindet der Text im Bild
    Danke für die Hilfe

  3. Support Staff 3 Posted by RockSolid Theme... on 01 Feb, 2021 09:48 AM

    RockSolid Themes's Avatar

    Auf dieser Seite können Sie folgenden CSS-Code einsetzen für die Navigation:

    .main-navigation {
        padding-right: 0;
    }
    @media (max-width: 1024px) and (min-width: 901px) {
        .main-navigation > ul > li > a, 
        .main-navigation > ul > li > strong, 
        .main-navigation > ul > li > span.active, 
        .main-navigation > ul > li > span.trail, 
        .main-navigation > ul > li > span.forward {
            padding-right: 0.1em;
        }
    }
    

    Das Problem mit dem abgeschnittenen Text konnten wir nicht reproduzieren. Mit welchem Browser tritt dieser Darstellungsfehler auf?

  4. 4 Posted by Office Webnew on 01 Feb, 2021 10:20 AM

    Office Webnew's Avatar

    Dieses Problem entsteht über das Handy direkt.
    Android zB Chrom
    Appel

    Wie in den Bildern zu sehen, passt sich der Text im Bild nicht an
    auch nicht nach dem Update
    Danke für die Unterstützung

  5. Support Staff 5 Posted by RockSolid Theme... on 01 Feb, 2021 11:13 AM

    RockSolid Themes's Avatar

    In diesem Fall können Sie folgenden CSS-Code zusätzlich einfügen, damit sich die Höhe des Sliders im mobilen Viewport an den Text-Inhalt anpasst:

    @media (max-width: 599px) {
        .main-slider {
            height: auto;
        }
    }
    

    Beachten Sie dabei jedoch bitte, dass bei sehr schmalen Viewports das Bild dann seitlich abgeschnitten wird.

  6. 6 Posted by Office Webnew on 01 Feb, 2021 12:02 PM

    Office Webnew's Avatar

    Hallo und sorry!
    Leider wird mei einem Handy Samsung A3 die Menüleiste (Hamburger) in das
    Logo verschoben.
    Kann es sein, dass sich hier das Logo nicht genug verkleinert?
    Hätte Sie hier auch noch eine Idee
    danke

  7. 7 Posted by Marco Glatz on 01 Feb, 2021 12:03 PM

    Marco Glatz's Avatar

    Hallo und sorry!
    Leider wird mei einem Handy Samsung A3 die Menüleiste (Hamburger) in das
    Logo verschoben.
    Kann es sein, dass sich hier das Logo nicht genug verkleinert?
    Hätte Sie hier auch noch eine Idee
    danke

  8. Support Staff 8 Posted by RockSolid Theme... on 01 Feb, 2021 02:38 PM

    RockSolid Themes's Avatar

    Mit folgendem CSS-Code können Sie die Größe des Logos in der Breite einschränken:

    .logo img {
        max-width: 70vw;
    }
    

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • desktop.GIF 371 KB
  • taplet.GIF 180 KB

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