Footer not displaying as expected on larger screen sizes - Twitter bootstrap

onomio
March 13, 2017
234 views
1 vote
2 Answers

I’m struggling with some undesired behaviour of a footer in twitter bootstrap. On small screen sizes (xs + sm) the footer is displayed as desired but on larger screen sizes all of the styling of the footer disappears.
I’ve been looking at it for a long time now but can’t figure what causes this.
I’m using Bootstrap 4.0.0a6. There’s hardly any styling going on, we’re using Bootstrap’s default styling for practically everything upto now.
I’ve created a JSFiddle to demonstrate the wrong behaviour. It’s specifically concerning the dimensions and background color that are set between lines 126-133 in the fiddle.

HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="/">MyBoilie</a>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="/introductie">Introductie</a>
          <div class="sub-menu hidden-md-up">
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/studiecentrum/praktijk">Studiecentrum</a>
          <div class="sub-menu hidden-md-up">
            <ul class="nav justify-content-center">
              <li class="nav-item w-50">
                <a href="/studiecentrum/praktijk" class="nav-link">Praktijk</a>
                <div class="dropdown-divider"></div>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/bodem">Bodem</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/bestand">Bestand</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/seizoenen">Seizoenen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/watertype">Watertype</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/waterkwaliteit">Waterkwaliteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/verblijfsduur">Verblijfsduur</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/doelstelling">Doelstelling</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/budget">Budget</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/weersinvloeden">Weersinvloeden</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/boilie-care">Boilie-care</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item w-50">
                <a href="/studiecentrum/theorie" class="nav-link">Theorie</a>
                <div class="dropdown-divider"></div>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/grondstoffen">Grondstoffen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/bouwstoffen">Bouwstoffen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/eigenschappen">Eigenschappen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/zintuigen">Zintuigen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/kwaliteit">Kwaliteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/attractiviteit">Attractiviteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/spijsvertering">Spijsvertering</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/kunstaas">Kunstaas</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/zigs">Zig&#039;s</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/werkplaats/basismix">Werkplaats</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="http://myboilie.dev/profiel">Profiel</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-request="onLogout" data-request-data="redirect: '/aanmelden'">Uitloggen</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="row mt-4 mb-4">
  <div class="col-xs-12">
  </div>
</div>
<section id="header" class="ma-0 pa-0 mb-3">
  <div class="header text-center">
    <h1>Welkom bij MyBoilie</h1>
  </div>
</section>
<section id="page">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-lightbulb-o blue"></i> Introductie</strong></div>
          <div class="card-block">
            <p>Bekijk onze trailer (2 minuten) en lees meer over de werking en mogelijkheden van onze site.</p> <a href="/introductie" class="btn btn-outline-primary">Introductie</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-book green"></i> Studiecentrum</strong></div>
          <div class="card-block">
            <p>Volg onze zoektocht naar informatie op basis van relevante thema's uit de praktijk en theorie.</p> <a href="/studiecentrum/praktijk" class="btn btn-outline-primary">Studiecentrum</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-flask red"></i> Werkplaats</strong></div>
          <div class="card-block">
            <p>Ga aan de slag in onze werkplaats en ontwerp, bestel en archiveer stapsgewijs je eigen boilierecepten.</p> <a href="/werkplaats/basismix" class="btn btn-outline-primary">Werkplaats</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<footer class="footer">
  <div class="container">
    <div class="row mt-0 mt-sm-0">
      <div class="col-sm-12 col-md-3">
        <ul class="nav flex-column">
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/algemene-voorwaarden">Algemene Voorwaarden</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/myboilie">Wat is MyBoilie</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/myboilie/tips">Handige tips</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/introductie/waarom-zelf-ontwerpen">Waarom zelf ontwerpen</a>
          </li>
          <li role="presentation" class="nav-ite""><a class="nav-link" href="http://facebook.com/myboilie" target="_blank">Facebook</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-9">
        <div id="feedback-form" class="container">
          <form method="POST" action="http://myboilie.dev" accept-charset="UTF-8" data-request="onSendFeedback" data-request-update="&quot;contact/feedback-sent.htm&quot;:&quot;#feedback-form&quot;">
            <div class="row mt-5 mt-sm-0">
              <div class="col-xs-12 col-sm-4">
                <div class="form-group">
                  <label for="name">Uw naam *</label>
                  <input type="text" class="form-control" value="" name="name" placeholder="Uw naam" tabindex="1" data-validation="length" data-validation-length="min2" data-validation-error-msg="Je naam is verplicht">
                </div>
                <div class="form-group">
                  <label for="body">Uw e-mail *</label>
                  <input type="text" class="form-control" value="" name="email" placeholder="Uw e-mail" tabindex="2" data-validation="email" data-validation-error-msg="Dit is geen geldig e-mailadres">
                </div>
              </div>
              <div class="col-xs-12 col-sm-8">
                <div class="form-group">
                  <label for="body">Uw bericht *</label>
                  <textarea class="form-control" value="" name="body" placeholder="Uw bericht" cols="30" rows="5" tabindex="3" data-validation="length" data-validation-length="min4" data-validation-error-msg="Voer een bericht in"></textarea>
                </div>
                <button type="submit" class="btn btn-primary" tabindex="4">Feedback</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</footer>

CSS

    @-ms-viewport {
    width: device-width;
  }

  .sub-menu {
    padding: 0 15px;
    background-color: #343638;
  }

  video {
    border: 1px solid #ccc;
  }

  .br-theme-fontawesome-stars-o .br-widget a:after {
    color: #d9edf7;
  }

  .br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
    color: #bcdff1;
  }

  .br-theme-fontawesome-stars-o .br-widget a.br-active:after {
    color: #31708f;
  }

  #order-ingredients {
    padding: 0;
  }

  #order-ingredients li {
    list-style-type: none;
    list-style-position: outside;
  }

  #order-boilie,
  #order-address-payment,
  #order-addons {
    overflow: scroll;
  }

  #order-addons .tab-pane img,
  #order-address-payment .card img {
    width: 100%;
  }

  #configurator {
    z-index: 1040;
  }

  #order-recipe-details-open {
    margin-top: -7px;
  }

  #login-error {
    display: none;
  }

  .active a {
    color: #000;
  }

  .header {
    height: 400px;
    background: url('/storage/app/media/boilies-home.png') center center no-repeat;
    background-size: cover;
  }

  .header h1 {
    padding-top: 150px;
    font-size: 4em;
    color: #fff;
    text-shadow: #222 2px 2px 10px;
    opacity: 0.8;
  }

  .header h2 {
    font-size: 2em;
    color: #fff;
    text-shadow: #222 2px 2px 10px;
    opacity: 0.8;
  }

  .slider {
    /*width: 100% !important;*/
  }

  .modal {
    z-index: 1100;
  }

  .is_stuck {
    margin-top: 45px;
  }

  #posts-list.is_stuck {
    padding-top: 45px;
  }

  .blue {
    color: #28429c;
  }

  .green {
    color: #009900;
  }

  .red {
    color: #700600;
  }

  @media (max-width: 767px) {
    .navbar .container {
      margin-left: 0;
      margin-right: 0;
    }

    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 750px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      padding: 50px 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 750px;
      background-color: #f5f5f5;
    }
    /*Small devices (landscape phones, 576px and up)*/
    @media (min-width: 576px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }
    /*Medium devices (tablets, 768px and up)*/
    @media (min-width: 768px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
        background-color: #f5f5f5;
      }
    }
    /*Large devices (desktops, 992px and up)*/
    @media (min-width: 992px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }
    /*Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }

Answers

Chosen as BEST ANSWER
- onomio
- March 19, 2017 at 1:00 pm
- 0 votes
0
I've managed to resolve this. There was a closing tag missing on a media query in a another CSS file. I'm using a combinator for all the CCS and in the result the media query for md size was in a media query in the other file.

(Edit)

remove the mt-0 mt-sm-0 and flex columns have an issue adapting to larger screen size when styled with css mediascreen try this for footer apates to any size of screen and positions them properly and shows properly this shoulw adapt to any size of screen

 <div class="tabbable full-width-tabs">
 <ul class="nav nav-tabs">
 <li class="take-all-space-you-can "></li>
 <li class="take-all-space-you-can "></li>
 <li class="take-all-space-you-can "></li>
 </ul>
  </div>


   <style>.full-width-tabs > ul.nav.nav-tabs { 
   display: table; 
   width: 100%;  
   table-layout: fixed; 
     } 
   .full-width-tabs > ul.nav.nav-tabs > li { 
   float: none; display: table-cell;
    } 
   .full-width-tabs > ul.nav.nav-tabs > li > a {
    text-align: center;
    } 
   .take-all-space-you-can{
    width:100%; background-color:#fff!important;
    }
    </style>

Please signup or login to give your own answer.

Click here to cancel reply.

Footer not displaying as expected on larger screen sizes – Twitter bootstrap

Answers