Darstellungsproblem Kontaktformular mobil

    Hallo,


    ich bin mal wieder bei dem Problem, dass die Seiten mobil mit dem joomla3 integrierten Kontaktformular über das Template hinausgehen :(.


    Als Vergleich habe ich eine Seite im Design Protostar erstellt, da passt alles.


    http://www.tsv1880ruedersdorf.…all1880/index.php/kontakt


    http://www.tsv1880ruedersdorf.…l1880/index.php/kontakt-2


    Zudem ist der "Senden-Button" beim Drüberfahren zwei-farbig geteilt. Dieser soll gebauso aussehen, wie der Weiterlesen-Button.

    http://www.tsv1880ruedersdorf.de/fussball1880/





    Über einen Lösungssansatz wäre ich dankbar und würde mich freuen.


    Danke. Grüße Tino

    Zitat von t-l

    Ist das von diesen Angaben abhängig?

    J/Nein. Würde da nichts ändern. Ist dann ja am desktop zu schmal usw.


    Sehe da folgendes: 1. Code, Zeile 1111, 2. Code Zeile 1116


    Code
    .form-horizontal .form-actions {
padding-left: 120px;
}
.form-horizontal .controls {
margin-left: 120px;
}

    das würde ich mal auskommentieren.


    Liebe Grüße

    Christine

    Das war schon einmal insoweit erfolgreich, dass die beiden Eingabefelder "Betreff" und "Nachricht" nicht mehr über das Template hinausgehen. Danke.


    Wäre noch der Text "Eine E-Mail senden. Alle mit (*) markierten Felder werden benötigt." sowie die horizontale Linie darunter und unten das Feld bei "Senden" einzugrenzen...



    Zitat von t-l

    Wäre noch der Text "Eine E-Mail senden. Alle mit (*) markierten Felder werden benötigt."

    Also hier muss ich w.o. geben. Komme mit dem template nicht klar. Wie Du ja gesehen hast, funktioniert es mit Protostar. Bei Deinem wirken wohl die bootstrap etc. anders usw.

    Gibt da u.a.

    <legend><div class="row-fluid paddingRow"> etc. span10 sollte OK sein - dennoch gelingt es mir da nicht.

    Zitat

    sowie die horizontale Linie darunter und unten das Feld bei "Senden" einzugrenzen...

    auch hier müsste man das Formular wahrscheinlich umbauen (siehe oben).


    Daher Alternativ Vorschlag:

    Code
    .form-actions {
background-color: transparent;
border:none;
}

    Liebe Grüße

    Christine

    Nehme an, Du meinst: Erweiterungen > Sprachen > Overrides > Neu?


    Dort den gewünschten Text-Inhalt eingeben. Links übertragen und eben: text<br />text

    Das musst Du dann aber wissen, ob es Dir so gefällt (desktop).


    Außerdem, wenn ich mit ca. 378px Auflösung anschaue, wird der Text eh umgebrochen.


    Liebe Grüße

    Christine

    Danke.


    Im Hinblick auf die mobile Ansicht wäre jetzt nur noch die eine Linie zu beschränken... hmm

    Dann wäre das Thema demnach erledigt.



    Würde aber noch zwei Fragen anhängen:

    - Wie kann ich da oben den Abstand verringern?

    - Wie bekomme ich bei der Spamabfrage (ECC+ - EasyCalcCheck Plus), das Eingabefeld unter den Text?


    Aber am wichtigsten die Linie... :)


    Danke. Grüße Tino

    Hallo Tino,


    och, die Linie - na geh, das mit border:none; hatten wir ja schon ... so, jetzt in einem Aufwasch:


    neu: Linie und: es gibt da eine geladene h3, welche eh nicht existiert. Bringt ein paar zerquetschte pixel.

    Code
    legend {
border:none;
}
.contact h3 {
display:none;    
}

    Abstand weg, Zeile 142:

    Code
    padding-bottom: 7px;

    schaust halt auch mit dem Inspector, ob noch paar pixel zu finden sind.


    ECC+

    Zeile 1655: entweder nur: block, oder ganz weg.

    Code
    label {
display: inline-block;
margin-left: 5px;
}

    ich hoffe, jetzt hammas, weil krieg schon Kontaktformularphobie :)


    Liebe Grüße

    Christine