My footer bounces up and down - SEO

user5260766
December 28, 2015
207 views
4 votes
4 Answers

On the sell page of our site, when a user goes through the process the footer is going up and down which gets a little annoying.

The selling page

This is the custom CSS I am using:

.ajax-loader,.offer-n-accept,.thumbnail{text-align:center}.repop-row,.repop-row-selected{border:1px solid #ebebeb;padding:20px}#declaration,#save_data,.ajax-loader,.error-msg,.payment_information,.previews{display:none}@font-face{font-family:brandfont;src:url(Inversionz.otf)}.branded{font-family:brandfont;font-size:300%;color:#FFF}.navbar .navbar-brand{font-family:brandfont;font-size:40px;color:#f5f5f5}.navbar-inverse .navbar-brand{font-family:brandfont;font-size:40px;color:#FFF}.navbar-default .navbar-brand:hover{font-family:brandfont;font-size:40px;color:#2E64FE}.row.repsteps,.row.steps{margin-bottom:10px;text-align:center;display:none}.thumbnail{cursor:pointer}.thumbnail:hover{border-color:#2E64FE}h1 span{color:#2E64FE}.offer-n-accept span{font-size:80px}.footer-links{color:#ebebeb;margin-left:5px;margin-right:5px}.repop-row,.repop-row-selected{margin-left:auto;margin-right:auto}footer.well{background-color:#000;color:#FFF;margin-top:0;margin-bottom:0;border-top:10px solid #2e64fe}.social-icons{font-size:43px;color:#fff}.repop-row{border-radius:2px;width:90%;height:90%;cursor:pointer}.repop-row-selected{border-radius:2px;width:90%;height:90%;background-color:#2e64fe;color:#fff;cursor:pointer}.repop-row:hover{border-color:#2e64fe}.repop-row-selected .repop-price-col{font-size:20px;color:#333;background-color:#fff;border-radius:2px;padding:5px}.repop-price-col,.selected .thumbnail{background-color:#2e64fe}.repop-price-col{font-size:20px;color:#fff;border-radius:2px;padding:5px}.repop-row-selected .repop-title-col{font-size:20px;margin-top:4px;color:#fff}.repop-title-col{font-size:20px;margin-top:4px}.selected .thumbnail .caption{color:#fff}.thumbnail .preview-title{font-size:16px;color:#2e64fe}span.device-price{font-size:40px;color:#337AB7;font-weight:700}.facebook-icon:hover{color:#3A5795}.twitter-icon:hover{color:#2B7BB9}.howitworks{background-color:#F2F2F2;padding:50px;margin-bottom:0}.howitworks div h3{color:#2e64fe}.howitworks div span.fa{font-size:80px}.accessory-selected .thumbnail{background-color:#2e64fe}.accessory-selected .thumbnail .caption h3{color:#FFF}.social-icons{margin:5px}.faq{background-color:#FAFAFA}.item img{margin-left:auto;margin-right:auto}.feature h2{color:#2e64fe}.btn-toolbar .btn{margin-bottom:5px}@media(max-width:767px){.h1,h1{font-size:32px}.h3,h3{font-size:18px}}

This is the layout file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->


    <!-- SEO META TAGS -->
    <?php if (isset($meta)): ?>
    <?= $meta->meta_tags ?>

    <?php endif ?>
    <!-- /SEO META TAGS -->

    <?php if (isset($title)&&!isset($meta)): ?>
      <title><?= $title ?></title>
    <?php endif ?>
    <link rel="icon" href="<?= site_url() ?>resources/favicon.ico" type="image/x-icon">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css'>
    <!-- Bootstrap -->
    <!-- <link href="<?= site_url() ?>third_party_plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="<?= site_url() ?>third_party_plugins/dist/css/style.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- Custom Styles -->
  	<link href="<?= site_url() ?>resources/css/custom.css" rel="stylesheet" >
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="//v2.zopim.com/?3SUblWLeUjhC3GSemhDvAl54RWkTi0Ci";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zopim Live Chat Script-->
  
  </head>
  <body>
  <?php
  $sell_active = '';
  $repair_active = '';
  $register_active = '';
  $login_active = '';
  $track_active = '';
  $myorders_active = '';
  //active classes.
  if(uri_string() == 'sell') {
    $sell_active = 'active';
  } else if(uri_string() == 'repair') {
    $repair_active = 'active';
  } else if(uri_string() == 'register') {
    $register_active = 'active';
  } else if(uri_string() == 'login') {
    $login_active = 'active';
  } else if(uri_string() == 'track') {
    $track_active = 'active';
  }else if(uri_string() == 'myorders') {
    $myorders_active = 'active';
  }

   ?>

  <!-- Navbar Starts -->
  <header>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?= site_url() ?>"><?= $this->config->item('app_name')?></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <?php if(!isset($_SESSION['user_login'])): ?>
        <div class="navbar-form navbar-right">
          <a href="<?= site_url() ?>login" class="btn btn-success"><span class="glyphicon glyphicon-user"></span> Login</a>
        </div><!-- /.navbar-form navbar-right -->
        <?php else: ?>
          <div class="navbar-form navbar-right">
            <a href="<?= site_url() ?>logout" class="btn btn-info"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
          </div><!-- /.navbar-form navbar-right -->
        <?php endif ?>
        <ul class="nav navbar-nav navbar-right">
          <li class="<?= $sell_active ?>"><a href="<?= site_url() ?>sell"><span class="glyphicon glyphicon-tag"></span> Sell</a></li>
          <li class="<?= $repair_active ?>"><a href="<?= site_url() ?>repair"><span class="glyphicon glyphicon-wrench"></span> Repair</a></li>
          <?php if(isset($_SESSION['user_login'])): ?>
            <li class="<?= $myorders_active ?>">
              <a href="<?= site_url() ?>myorders"><span class="glyphicon glyphicon-shopping-cart"></span> My Orders</a>
            </li>
          <?php else: ?>
            <li class="<?= $track_active ?>">
              <a href="<?= site_url() ?>track"><span class="glyphicon glyphicon-globe"></span> Order Status</a>
            </li>
          <?php endif ?>
          <?php if (isset($_SESSION['user_login'])): ?>
            <?php else: ?>
            <li class="<?= $register_active ?>">
              <a href="<?= site_url() ?>register"><span class="glyphicon glyphicon-pencil"></span> Register</a>
            </li>
          <?php endif ?>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
</header>
  <!-- Navbar Ends -->
  <!-- Content Starts -->
  <?php echo $view ?>
  <!-- Content Ends -->
  <br>



<div class="horizontal-rule bg-blue"></div><!-- /.horizontal-rule bg-blue -->
<div class="section-sm bg-dark">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p class="no-margin-bottom">Open in Dade, Broward, & Palm Beach</p>
        <p class="text-muted"><small>&copy; 2016 MacMetro.com. All rights reserved.</small></p>
      </div><!-- /.col-sm-6 -->
      <div class="col-sm-6">
        <div class="text-right">
          <ul class="list-inline">
            <li><a href="<?php echo base_url('help'); ?>">Help</a></li>
			<li><a href="<?php echo base_url('faqs'); ?>">FAQs</a></li>
            <li><a href="<?php echo base_url('terms'); ?>">Terms</a></li>
            <li><a href="<?php echo base_url('contact'); ?>">Contact Us</a></li>
            <li>
              <a href="<?= $_SESSION['company'][1]->facebook ?>" target="_blank">
                <span class="fa-stack fa-lg">
                  <span class="fa fa-square fa-stack-2x"></span>
                  <span class="fa fa-facebook fa-stack-1x fa-inverse"></span>
                </span>
              </a>
            </li>
            <li>
              <a href="<?= $_SESSION['company'][1]->twitter ?>" target="_blank">
                <span class="fa-stack fa-lg">
                  <span class="fa fa-square fa-stack-2x"></span>
                  <span class="fa fa-twitter fa-stack-1x fa-inverse"></span>
                </span>
              </a>
            </li>
          </ul><!-- /.list-inline -->
        </div><!-- /.text-right -->
      </div><!-- /.col-sm-6 -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</div><!-- /.section-sm bg-dark -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?= site_url() ?>third_party_plugins/jquery/dist/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?= site_url() ?>third_party_plugins/bootstrap/dist/js/bootstrap.min.js"></script>


    <!-- Custom scripts -->
    <script>
      // data to be passed to the custom script.
      var site_url = "<?= site_url() ?>";
    </script>
    <script src="<?= site_url() ?>resources/js/custom.js"></script>
    <script src="<?= site_url() ?>resources/js/offer_acceptance.js"></script>
	 
    
  </body>
</html>

Answers

- user5722584
- December 28, 2015 at 9:27 am
- 0 votes
0
you can set position to position: absolute; and then your footer will be in the same place.
position: relative; will make it bounce, if you added it please change it to position: absolute; and add top: 1000px or any height.

Login or Signup to reply.

- sjokkogutten
- December 28, 2015 at 9:34 am
- 0 votes
0
You should consider using a sticky footer
```
<footer class="footer">
  
</footer>
```
The sticky <footer> can be found here and the css here
Login or Signup to reply.

- Winthxr1909
- December 28, 2015 at 10:49 am
- 0 votes
0
Two suggestions for you off the top of my head could be:

Give your <div class="section-md"> a minimum height so it’ll push down the footer, the width of a screen varies a lot but the the height not so often. Then it’ll also follow further down on smaller devices.

Alternatively you can make a <div id="footer"> and give it a fixed position to make sure it’ll always be in the bottom, in case you wanna have that infomation displayed at all time.

However, more solutions are possible for this problem.

Login or Signup to reply.

- stubben
- December 28, 2015 at 10:51 am
- 0 votes
0
Good option about sticky footer.

You can also add an extra class (fx.: order-steps) to the section with class section-md that contains all the steps. Add a property to

.order-steps { min-height: 600px }

This will make ‘room’ for the content in the different steps.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

My footer bounces up and down – SEO

Answers