Footer Header Malibu Theme

Thema wurde von Monat111, 22. November 2020 erstellt.

  1. Monat111

    Monat111 Mitglied

    Registriert seit:
    2. November 2020
    Beiträge:
    5
    Danke erhalten:
    0
    #1 Monat111, 22. November 2020
    Hallo,

    ich bin leider nicht ganz so begabt im CSS.
    Ich habe festgestellt, dass meine Modulboxen sich leicht mit dem Footer Header, welchen ich als Newsletter nutze überlappen:
    [​IMG]

    Wie kann ich es verhindern, dass sich der Button so überlappt?
    Im Footer Header steht folgender Code:

    Code:
    <form action="newsletter.php" class="form-horizontal" method="post">

    <div class="col-xs-12 col-md-3 col-lg-3">
        <p class="heading">
            Newsletter abonnieren
        </p>
    </div>
   
    <div class="col-xs-12 col-md-3 col-lg-4">
        <p class="text">
            ... und bleiben Sie stets aktuell Informiert &uuml;ber aktuelle Angebote!
        </p>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-5">
        <div class="form-group">
            <div class="col-xs-12 col-sm-6 col-md-7">
                <input class="form-control validate" data-validator-validate="required email" name="email" placeholder="Deine E-Mail-Adresse" type="text" />
            </div>

            <div class="col-xs-12 col-sm-6 col-md-5">
                <input class="btn btn-info btn-block" type="submit" value="Jetzt anmelden" />
            </div>
        </div>
    </div>
</form>
    Leider bringt das anpassen der Zahlen nur großes Chaos und verkleinert den Rahmen nicht.
    Im Backend habe ich im Style Editor die Minimumhöhe auf 5px gestellt.

    Kann mir jemand sagen wie ich dort einen kleinen "Abstand" mit einbaue?
    Es reichen ja schon wenige px. Ich weiß nur nicht wo ich da ansetzen muss.

    Danke im vorraus
    Marvin
     
  2. Wilken (Gambio)

    Wilken (Gambio) Administrator
    Mitarbeiter

    Registriert seit:
    7. November 2012
    Beiträge:
    17.055
    Danke erhalten:
    6.460
    Danke vergeben:
    1.983
    #2 Wilken (Gambio), 22. November 2020
    Du könntest dem Footer Header per CSS wahrscheinlich einfach einen kleinen Abstand nach oben verpassen, mit einem padding-top auf das richtige HTML Div. Ungefähr so:

    Code:
    .footer-header {
  margin-top: 10px;
}
    Eventuell mit einem Media Query umschliessen, damit das mobil nicht auch gemacht wird.

    Code:
    @media only screen and (min-width: 768px) {
  .footer-header {
    margin-top: 10px;
  }
}
    Für mehr müsste man sich das am Objekt ansehen.