Fehler: Home Slider / Image Slider Darstellung auf dem iphone sind Image und Überschrift 1 + 2 untereinander

Karl-Ludwig Grosch's Avatar

Karl-Ludwig Grosch

07 Aug, 2017 07:58 AM

Produkt: Vision Contao
Contao-Version: 3.5
Browser und Browserversionen: edge, Chrome neueste, IOS 10.3.3

Auf PC + Tablet liegt die beiden Überschriften korrekt AUF dem Bild. Auf dem iPhone wird dies untereinander, also zuerst das Bildelement und dann die beiden Überschriften. Wie bekomme ich die übereinander?
Außerdem ist der Text auf dem iPhone viel zu groß.
Was muß ich tun, um das entsprechend anzupassen?

  1. Support Staff 1 Posted by RockSolid Theme... on 07 Aug, 2017 09:30 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Der Text wird auf kleinen Bildschirmen unter dem Bild angezeigt, damit kein Text abgeschnitten werden muss und der Inhalt des Bildes besser sichtbar wird.

    Sie können die Positionierung und die Textgröße verändern indem Sie folgenden CSS-Code in die Datei files/vision/css/custom.css einfügen:

    @media screen and (max-width: 599px) {
        .main-image-hgroup,
        .main-image.-large > .main-image-hgroup {
            position: absolute;
            top: auto;
            bottom: 0;
        }
        .main-image-hgroup h2,
        .main-image.-large > .main-image-hgroup h2 {
            font-size: 24px;
        }
        .main-image-hgroup h3,
        .main-image.-large > .main-image-hgroup h3 {
            font-size: 14px;
        }
    }
    
  2. 2 Posted by Karl-Ludwig Gro... on 07 Aug, 2017 10:34 AM

    Karl-Ludwig Grosch's Avatar

    Herzlichen Dank für Ihre schnelle Antwort.

    Habe den Code entsprechend eingebaut, auf der Startseite ändern sich
    dadurch nichts, auf den Seiten der Produkt-Kategorien werden die Bilder
    abgeschnitten.
    Was hab ich falsch gemacht?

  3. Support Staff 3 Posted by RockSolid Theme... on 07 Aug, 2017 12:52 PM

    RockSolid Themes's Avatar

    Anscheinend hat Ihr Text-Editor zusätzliche Zeichen in die CSS-Datei eingefügt die den Code fehlerhaft macht, der CSS-Code sieht aktuell folgendermaßen auf Ihrer Website aus:

    @media screen and (max-width: 599px) {
         .main-image-hgroup,
        Â .main-image.-large > .main-image-hgroup {
            position: absolute;
            top: auto;
            bottom: 0;
            }
        Â .main-image-hgroup h2,
        Â .main-image.-large > .main-image-hgroup h2 {
            font-size: 14px;
            }
         .main-image-hgroup h3,
        Â .main-image.-large > .main-image-hgroup h3 {
            font-size: 12px;
            }
    }
    

    Durch die zusätzlichenÂ-Zeichen wird der CSS-Code nicht richtig vom Browser verarbeitet. Bitte entfernen Sie diese Sonderzeichen und speichern Sie die Datei als UTF-8 (ohne BOM).

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • IMG_1968.PNG 390 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