user4756836 user4756836 - 4 months ago 11
CSS Question

Navigation tabs not aligning properly as browser size becomes smaller

I have navigation tabs on my main page. My issue is that the navigation tabs are not aligned properly when the browser size becomes smaller. I tried adding media query to try to help the issue but it didn't help much.

HTML:

<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a></li>
<li><a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<div class="row">
<div class="well">
<legend>
<h5>Login</h5>
</legend>
<form id="form-signin">
<input type="email" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>

<button class="btn main-button" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile">
<div class="row">
<div class="well">
<legend>
<h5>Login</h5>
</legend>
<form id="form-register">
<input type="email" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn main-button" type="submit">Submit</button>
</form>
</div>
</div>


CSS:

html, body, .wrapper, {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}

.main-button {
background-color: #374377;
color: #fff;
display: block;
width: 100%;
margin-top: 10px;
}

.main-button:hover {
color: #fff;
}

.wrapper {
display: table;
max-width: 500px;
margin: 0 auto;
}

.container {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}

.nav-tabs {
border-bottom: none !important;
margin-left: -15px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
background-color: #f5f5f5;
}

.nav-tabs li {
background-color: #dcdcdc;
}

body .navbar {
margin-bottom: 0;
}


/* Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 479px) {
.nav-tabs {
margin-left: 110px;
}
.tab-pane {
width: 200px;
margin: 0 auto;
}
}


JSFiddle Demo

Answer

You should remove all the row classes as well as remove/rewrite any offsets in your CSS that are trying to compensate for all of the rows.

Specifically these rules:

.nav-tabs {
  margin-left: -15px;
}
.nav-tabs {
  margin-left: 110px;
}
.tab-pane {
  width: 200px;
  margin: 0 auto;
}

Working Example:

html,
body,
.wrapper,
.admin-wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.wrapper .form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.wrapper .main-button {
  background-color: #374377;
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 10px;
}
.wrapper .main-button:hover {
  color: #fff;
}
.wrapper {
  display: table;
  max-width: 500px;
  margin: 0 auto;
}
.wrapper .main {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.wrapper .nav-tabs {
  border-bottom: none !important;
}
.wrapper .nav-tabs > li.active > a,
.wrapper .nav-tabs > li.active > a:focus,
.wrapper .nav-tabs > li.active > a:hover {
  background-color: #f5f5f5;
}
.wrapper .nav-tabs li {
  background-color: #dcdcdc;
}
.wrapper .tab-content .tab-pane,
.wrapper .tab-content .well {
  margin: 0;
}
/* Media Queries
-------------------------------------------------------------- */

@media only screen and (max-width: 479px) {
  .wrapper .main {
    padding: 10px;
  }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="main">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a>
      </li>
      <li><a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane active in" id="home">
        <div class="well">
          <legend>
            <h5>Login</h5>
          </legend>
          <form id="form-signin">
            <input type="email" class="form-control" placeholder="Email address" required autofocus>
            <input type="password" class="form-control" placeholder="Password" required>
            <button class="btn main-button" type="submit">Submit</button>
          </form>
        </div>
      </div>
      <div class="tab-pane fade" id="profile">
        <div class="well">
          <legend>
            <h5>Login</h5>
          </legend>
          <form id="form-register">
            <input type="email" class="form-control" placeholder="Email address" required autofocus>
            <input type="password" class="form-control" placeholder="Password" required>
            <button class="btn main-button" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Working Example Using Absolute Position:

html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.login-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 100%;
}
.login-wrapper .form-control {
  margin-top: 5px;
}
.login-wrapper .main-button {
  background-color: #374377;
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 10px;
}
.login-wrapper .main-button:hover {
  color: #fff;
}
.login-wrapper .nav-tabs > li {
  margin: 0px;
}
.login-wrapper .nav.nav-tabs > li > a {
  background-color: #dcdcdc;
  border-radius: 0;
}
.login-wrapper .nav.nav-tabs > li.active > a,
.login-wrapper .nav.nav-tabs > li.active > a,
.login-wrapper .nav.nav-tabs > li.active > a:focus,
.login-wrapper .nav.nav-tabs > li.active > a:hover {
  background-color: #f5f5f5;
  box-shadow: none;
}
.login-wrapper .tab-content .tab-pane,
.login-wrapper .tab-content .well {
  border-radius: 0;
  margin: 0;
}
@media only screen and (max-width: 479px) {
  .login-wrapper {
    position: relative;
    max-width: 330px;
    width: 100%;
    padding: 10px;
  }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="login-wrapper">

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a>
    </li>
    <li>
      <a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a>
    </li>
  </ul>

  <div id="myTabContent" class="tab-content">

    <div class="tab-pane active in" id="home">
      <div class="well">
        <legend>
          <h5>Login</h5>
        </legend>
        <form id="form-signin">
          <input type="email" class="form-control" placeholder="Email address" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn main-button" type="submit">Submit</button>
        </form>
      </div>
    </div>

    <div class="tab-pane fade" id="profile">
      <div class="well">
        <legend>
          <h5>Register</h5>
        </legend>
        <form id="form-register">
          <input type="email" class="form-control" placeholder="Email address" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn main-button" type="submit">Submit</button>
        </form>
      </div>
    </div>

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Comments