• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Footer wird nicht ganz ausgefüllt.

Krobbus

Mitglied
Hallo, ich habe folgendes Problem und hoffe das mir jemand helfen kann. Ich habe ein Template gekauft und erfolgreich angepasst, nur der Footer macht mir noch Probleme.
So sieht er aus:
5192
Ich würde gerne den Bereich "Mehr Informationen" entfernen, ohne das die Bereiche rechts davon einfach einrücken, wie in folgemden Screenshot:
5193

Wie man sieht, ist rechts neben Kontaktmöglichkeiten ganz viel Platz, das würde ich gerne vermeiden (vielmehr sollen die drei verbliebenen Bereiche trotzdem auf die ganze Breite verteilt werden. Wie kann ich das machen? Wenn ihr dafür einen Teil des CSS sehen wollt, sagt mir einfach Bescheid, und ich werde ihn dann sofort hier nachliefern! (Edit: Achja, das Template ist responsive, und soll es auch bleiben :))

Hier der Code des Footers:
Code:
<footer class="page-foot bg-ebony-clay">
        <div class="section-40 section-md-75">
          <div class="container">
            <div class="row justify-content-sm-center">
              <div class="col-sm-9 col-md-11 col-xl-12">
                <div class="row row-50">
                  <div class="col-md-6 col-lg-10 col-xl-3">
                  
                    <div class="inset-xl-right-20" style="max-width: 510px;"><!--<a class="brand" href="index.html"><img src="images/logo-inverse-143x28.png" alt="" width="143" height="28"/></a>-->
                  
                      <p>
                        Stehen Sie oder Ihr Unternehmen vor einer rechtlichen Herausforderung, die eine fundierte Beratung und kompetente Vertretung erfordert? Setzen Sie sich noch heute mit uns in Verbindung, um ein Beratungsgespräch mit einem Anwalt zu vereinbaren.
                      </p><a class="link link-group link-group-animated link-bold link-white" href="contact-us.html"><span>Kontaktmöglichkeiten</span><span class="novi-icon icon icon-xxs icon-primary fa fa-angle-right"></span></a>
                    </div>
                  </div>

              
                
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <p class="h7">Kurzlinks</p>
                    <div class="row" style="max-width: 270px;">
                      <div class="col-6">
                        <ul class="list-marked-variant-2">
                          <li><a href="./">Start</a></li>
                          <li><a href="team.html">Team</a></li>
                          <li><a href="notar.html">Notar</a></li>
                          <li><a href="kanzlei.html">Kanzlei</a></li>
                        </ul>
                      </div>
                      <div class="col-6">
                        <ul class="list-marked-variant-2">
                          <li><a href="kontakt.html">Kontakt</a></li>
                          <li><a href="impressum.html">Impressum</a></li>
                          <li><a href="datenschutz.html">Datenschutz</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <p class="h7">Kontaktmöglichkeiten</p>
                    <address class="contact-info text-left">
                      <div class="unit unit-horizontal unit-spacing-md align-items-center">
                        <div class="unit-left"><span class="novi-icon icon icon-xs icon-storm-gray material-icons-phone"></span></div>
                        <div class="unit-body"><a class="link-white" href="callto:+4952029963223">(05122) 123 4567</a></div>
                      </div>
                      <div class="unit unit-horizontal unit-spacing-md align-items-center">
                        <div class="unit-left"><span class="novi-icon icon icon-xs icon-storm-gray fa fa-envelope-o"></span></div>
                        <div class="unit-body"><a class="link-white" href="mailto:[email protected]">[email protected]</a></div>
                      </div>
                      <div class="unit unit-horizontal unit-spacing-md">
                        <div class="unit-left"><span class="novi-icon icon icon-xs icon-storm-gray material-icons-place"></span></div>
                        <div class="unit-body"><a class="link-white d-inline" href="#">Hauptstraße 123<br>XXXXX Berlin</a></div>
                      </div>
                    </address>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <hr>
        </div>
        <div class="section-35">
          <div class="container text-center">
            <div class="row row-15 flex-md-row-reverse justify-content-md-between align-items-md-center">
              <div class="col-md-6 text-md-right">
                <div class="group-sm group-middle">
                
                </div>
              </div>
              <div class="col-md-6 text-md-left">
                <p class="rights text-white"><span class="copyright-year"></span><span>&nbsp;&#169;&nbsp;</span><span>Rechtsanwälte XXX.&nbsp;</span><a class="link-white-v2" href="impressum.html">Impressum</a> | <a class="link-white-v2" href="datenschutz.html">Datenschutz</a></p>

              </div>
            </div>
          </div>
        </div>
      </footer>

    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
 
Werbung:
Das sieht mir schwer nach Wordpress aus. Es wäre gut, wenn du uns einen Link zur Seite posten würdest, dann kann man sich das genauer ansehen.
 
Danke für dein schnelles Feedback!

Ist kein Wordpress :) Habe es zum testen hochgeladen auf [link abgelaufen]
 
Zuletzt bearbeitet:
Werbung:
Das nicht gewollte DIV löschen... oder mit 'display: none;' ausblenden und für den Container .row...
CSS:
.row {
  justify-content: space-between;
}
im CSS notieren.
 
Sailor, danke das sieht schon viel besser aus! Könnte man anstatt von Platz zwischen den Spalten hinzuzufügen auch die Spalten an sich etwas verbreitern? Das wäre mir noch lieber, aber irgendwie finde ich das im css nicht.
 
Das könnte man - ist aber mit etwas Vorsicht zu machen, denn im 'bootstrap.css' sind hier für verschiedene Bildschirmbreiten (mit MediaQueries) unterschiedliche Werte vorgegeben.
Mit den derzeitigen Einstellungen ist die Breite der Container im Footer auf 25% eingestellt - eben passend zu den ursprünglichen 4 Containern.
Das könnte man auf 33% (für 3 Container) ändern... man muss dann aber schauen ob und wie sich das auf das responsive Verhalten der Seite auswirkt. Ggf müssten dann alle Werte in den MediaQueries angepasst werden.
Bitte mal das testen...
CSS:
@media screen and (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 33%;
    max-width: 33%;
  }
}
 
Werbung:
Zurück
Oben