Menu
EDIT #4: All of my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<title>{{var pageTitle}}</title>
<link rel="icon" type="image/png" href="{{var protoHost}}FavIconstackoverflow32.png">
<link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="{{var protoHost}}css/main.css">
<link rel="stylesheet" href="{{var protoHost}}css/print.css">
<link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css">
{{var extraHeaders}}
</head>
<body>
<div class="page">
<div class="container-fluid">
<div class="topheader col-xs-0 col-md-0">
<div class="phonecolours">
<p class="headerspacer inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-865-7733" class="phonecolours"> (613) 865-7733</a></p>
<p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-817-7733" class="phonecolours"> (613) 817-7733</a></p>
<p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-454-7733" class="phonecolours"> (613) 454-7733</a></p>
</div>
<button type="button" class="btn btnstackoverflow buttonspacer">Referral Services</button>
<button type="button" class="btn btnstackoverflow buttonlinkspacer">My Account</button>
<button type="button" class="btn btnstackoverflow buttonlinkspacer">Reseller Services</button>
</div>
<div class="col-xs-3 col-sm-3 branding">
<a class="imgCon" href="{{var protoHost}}">
<img class="img-responsive" alt="stackoverflowinternet Internet Services" src="{{var protoHost}}img/TrueInternet.png">
</a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer brandingspacer buttonheader" href="https://www.facebook.com/stackoverflowInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer buttonheader" href="https://twitter.com/stackoverflowinternetcanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer buttonheader" href="https://www.instagram.com/stackoverflowinternetinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer buttonheader" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
</div>
<div class="col-xs-0">
<a class="inlineParagraph socialspacer buttonheader" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
</div>
</div>
<nav class="navbar navbar-custom">
<div class="col-xs-0 container-fluid" data-expand="false">
<div class="row">
<p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
<p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
<p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
</div>
</div>
</nav>
<div class="col-xs-0">
{{var content}}
</div>
<div class="footerspacer"></div>
<div class="container-fluid">
<div class="row">
<footer class="footer">
<a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty & Returns Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
<br><br><br>
<p>© 2016 stackoverflow Internet Services - All Rights Reserved</p>
</footer>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="{{var protoHost}}js/showhide.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{var protoHost}}js/navCode.js"></script>
{{var extraScripts}}
</body>
</html>
EDIT #3: My original issue has been solved, but now may footer isn't responsive anymore. See my old question to see the issue: Bootstrap Columns not Being Responsive
My footer isn't the full width of my page. I've set the page to 100px and everything else is fitting in it perfect. I've tried to set my width to auto (too short), too 100% (too long), and to inherit (it fits it, but I lose all responsiveness).
My CSS:
.page{
width: 1100px;
margin: 0 auto;
height: 100%;
position: relative;
}
.footer{
background-color: #277FD8;
bottom: 0;
width: 100%;
height: auto;
}
My HTML:
<div class="container-fluid">
<div class="row">
<footer class="footer">
<a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty & Returns Policy</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
<a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
<br><br><br>
</footer>
</div>
</div>
The page CSS rule is a wrapper.
And the picture:
Edit: Thanks for all the replies! I've tried nesting the Footer tag within my container-fluid and row, and it's not working. Here's what I mean when I use 100% on my footer for width (sorry, it's not to tall, I don't know what I was thinking/typing):
Edit #2:
Navbar HTML:
<nav class="navbar navbar-custom">
<div class="col-xs-0 container-fluid" data-expand="false">
<div class="row">
<p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
<p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
<p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
</div>
</div>
</nav>
Navbar CSS:
.navbar{
height: 100px;
}
.navbar-custom {
background-color: #277FD8;
border-color: #277FD8;
z-index: 9999px;
height: 70px;
}
722
The issue is that the footer is wrapped in a div that has a fixed width.
.page {
width: 1100px; <-- THIS IS THE PROBLEM. REMOVE THIS.
margin: 0 auto;
height: 100%;
position: relative;
}
If you remove this, the footer will expand the full width of the window, however I don't know how removing that will affect the rest of the page. Your best bet is to remove it, and then use bootstrap's container class as the page wrapper. Container-fluid will span 100% width, however container is probably what you're looking for as it will use widths that are appropriate for each media size breakpoint (without you having to worry about defining them). If you have your page content in a wrapper with a fixed width, as you do now, your page will not be responsive because you are preventing the elements within that wrapper from scaling down any smaller than 1100px. Just by looking quickly at your full page markup, it seems like you'd be OK if you removed the .page elements and changed container-fluid to container. Keep in mind that if these sections have background colors that you want to span 100%, they will no longer be 100% once wrapped in a container. So you'd have to do something like this:
#background-color {
background: #ccc;
}
<div id="background-color">
<div class="container">
*content here *
</div>
</div>
Also, if you want to have your footer take up 100% of the page, but the content inside the footer to only fill the container (or wrapper) width, you will want to set it up similar to this:
<footer>
<div class="container">
<div class="row">
<a href="XYZ"></a>
etc..
</div>
</div>
</footer>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
