.bottom-menu doesn't fit the screen size 1920x1080 #310

Closed
julianusti opened this Issue Dec 19, 2013 · 1 comment

Comments

Projects
None yet
2 participants

.bottom-menu doesn't fit the screen size 1920x1080. The footer located in the "middle" of the screen and should be at the bottom of the screen, right? Please fix it asap.

pytkin added the bug label Apr 25, 2014

@pytkin pytkin added enhancement and removed bug labels May 6, 2014

pytkin commented May 6, 2014

I will fix responsive version of bottom-menu for mobile and tablet devices in Flat UI Pro 1.3.0. I don't want use 'fixed' or 'static' modifiers, because this code can break something. But if you mix our code and code from this tutorial, you get fixed responsive bottom-menu.

HTML:

<style>
  html, body {
    height: 100%;
  }
  .wrapper {
    display: table;
    height: 100%;
    width: 100%;
  }
  .block {
    display: table-row;
    height: 1px;
  }
  .push {
    height: auto;
  }
</style>

<section class="wrapper">
  <header class="block"></header>
  <div class="block push"></div>
  <footer class="block">
    <div class="bottom-menu">
      <div class="container">
        <div class="row">
          <div class="col-md-2 col-sm-2">
            <a href="#fakelink" class="bottom-menu-brand">Flat UI</a>
          </div>
          <div class="col-md-8 col-sm-8">
            <ul class="bottom-menu-list">
              <li><a href="#fakelink">About Us</a></li>
              <li><a href="#fakelink">Store</a></li>
              <li class="active"><a href="#fakelink">Jobs</a></li>
              <li><a href="#fakelink">Privacy</a></li>
              <li><a href="#fakelink">Terms</a></li>
              <li><a href="#fakelink">Follow Us</a></li>
              <li><a href="#fakelink">Support</a></li>
              <li><a href="#fakelink">Links</a></li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-2">
            <ul class="bottom-menu-iconic-list">
              <li><a href="#fakelink" class="fui-pinterest"></a></li>
              <li><a href="#fakelink" class="fui-facebook"></a></li>
              <li><a href="#fakelink" class="fui-twitter"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div> <!-- /bottom-menu -->
  </footer>      
</section>

1920X1080:
flat ui pro - mozilla firefox png

Width <1000:
flat ui pro - mozilla firefox2

pytkin closed this May 6, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment