Web Analytics Made Easy -
StatCounter "Double Footer" appearing on my website - CodingForum

Announcement

Collapse
No announcement yet.

"Double Footer" appearing on my website

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • "Double Footer" appearing on my website

    Hi there,

    I just finished my website and I noticed that when I first go to the website (Tsirakis Design - UX/UI Design, Graphic Design, Branding & Marketing) and navigate to the about and contact page (all other pages are fine), a "double footer" is appearing at the bottom (see attached images). When I refresh the page, it goes to how it should appear (a single footer). I don't see anywhere in the code that would cause this double footer effect (I have posted the HTML/CSS for the footer below), so any help with this issue would be greatly appreciated!

    Code:
    		<footer class="footer-distributed">
    
    			<div class="footer-left">
    
    				<h3><img src="img/TsirakisDesign_Logo_alt.png"></h3>
    
    				<p class="footer-links">
    					<a href="index.html">Home</a>
    					·
    					<a href="casestudies.html">Case Studies</a>
    					·
    					<a href="other.html">Other Projects</a>
    					·
    					<a href="about.html">About</a>
    					·
    					<a href="contact.html">Contact</a>
    					
    				</p>
    
    				<p class="footer-company-name">Tsirakis Design &copy; 2016</p>
    			</div>
    
    			<div class="footer-center">
    
    				<div>
    					<i class="fa fa-map-marker"></i>
    					<p><span>1920 17th Street</span> Denver, Colorado</p>
    				</div>
    
    				<div>
    					<i class="fa fa-phone"></i>
    					<p>+1 555 123456</p>
    				</div>
    
    				<div>
    					<i class="fa fa-envelope"></i>
    					<p><a href="mailto:[email protected]">[email protected]</a></p>
    				</div>
    
    			</div>
    
    			<div class="footer-right">
    
    				<p class="footer-company-about">
    					<span>About Tsirakis Design</span>
    					Tsirakis Design strives to provide user-friendly products that solve problems with great UX Design, User Research and User Testing.
    				</p>
    
    				<div class="footer-icons">
    
    					<a href="https://twitter.com/michaeltsirakis" target="blank"><i class="fa fa-twitter"></i></a>
    					<a href="https://www.flickr.com/photos/[email protected]/" target="blank"><i class="fa fa-flickr"></i></a>
    					<a href="https://www.linkedin.com/in/mtsirakis" target="blank"><i class="fa fa-linkedin"></i></a>
    					<a href="https://www.instagram.com/michaeltsirakis/" target="blank"><i class="fa fa-instagram"></i></a>
    
    				</div>
    
    			</div>
    
    		</footer>
    Code:
    .footer-distributed{
    	background-color: #EE383D;
    	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    	box-sizing: border-box;
    	width: 100%;
    	text-align: left;
    	font: bold 16px sans-serif;
    
    	padding: 55px 50px;
    	margin-top: 80px;
    }
    
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
    	display: inline-block;
    	vertical-align: top;
    }
    
    /* Footer left */
    
    .footer-distributed .footer-left{
    	width: 40%;
    }
    
    /* The company logo */
    
    .footer-distributed h3{
    	color:  #ffffff;
    	font: normal 36px 'Cookie', cursive;
    	margin: 0;
    }
    
    .footer-distributed h3 span{
    	color:  #5383d3;
    }
    
    /* Footer links */
    
    .footer-distributed .footer-links{
    	color:  #ffffff;
    	margin: 20px 0 12px;
    	padding: 0;
    }
    
    .footer-distributed .footer-links a{
    	display:inline-block;
    	line-height: 1.8;
    	text-decoration: none;
    	color:  inherit;
    }
    
    .footer-distributed .footer-company-name{
    	color:  #53070b;
    	font-size: 14px;
    	font-weight: normal;
    	margin: 0;
    }
    
    /* Footer Center */
    
    .footer-distributed .footer-center{
    	width: 35%;
    }
    
    .footer-distributed .footer-center i{
    	background-color:  #000000;
    	color: #ffffff;
    	font-size: 25px;
    	width: 38px;
    	height: 38px;
    	border-radius: 50%;
    	text-align: center;
    	line-height: 42px;
    	margin: 10px 15px;
    	vertical-align: middle;
    }
    
    .footer-distributed .footer-center i.fa-envelope{
    	font-size: 17px;
    	line-height: 38px;
    }
    
    .footer-distributed .footer-center p{
    	display: inline-block;
    	color: #ffffff;
    	vertical-align: middle;
    	margin:0;
    }
    
    .footer-distributed .footer-center p span{
    	display:block;
    	font-weight: normal;
    	font-size:14px;
    	line-height:2;
    }
    
    .footer-distributed .footer-center p a{
    	color:  #ffffff;
    	text-decoration: none;
    }
    
    
    /* Footer Right */
    
    .footer-distributed .footer-right{
    	width: 20%;
    }
    
    .footer-distributed .footer-company-about{
    	line-height: 20px;
    	color:  #f5f5f5;
    	font-size: 13px;
    	font-weight: normal;
    	margin: 0;
    }
    
    .footer-distributed .footer-company-about span{
    	display: block;
    	color:  #ffffff;
    	font-size: 14px;
    	font-weight: bold;
    	margin-bottom: 20px;
    }
    
    .footer-distributed .footer-icons{
    	margin-top: 25px;
    }
    
    .footer-distributed .footer-icons a{
    	display: inline-block;
    	width: 35px;
    	height: 35px;
    	cursor: pointer;
    	background-color:  #000000;
    	border-radius: 2px;
    
    	font-size: 20px;
    	color: #ffffff;
    	text-align: center;
    	line-height: 35px;
    
    	margin-right: 3px;
    	margin-bottom: 5px;
    }
    
    @media (max-width: 880px) {
    
    	.footer-distributed{
    		font: bold 14px sans-serif;
    	}
    
    	.footer-distributed .footer-left,
    	.footer-distributed .footer-center,
    	.footer-distributed .footer-right{
    		display: block;
    		width: 100%;
    		margin-bottom: 40px;
    		text-align: center;
    	}
    
    	.footer-distributed .footer-center i{
    		margin-left: 0;
    	}
    
    }
    Click image for larger version

Name:	Screen Shot 2016-09-15 at 12.40.04 PM.jpg
Views:	1
Size:	40.6 KB
ID:	2283602Click image for larger version

Name:	Screen Shot 2016-09-15 at 12.40.17 PM.jpg
Views:	1
Size:	44.7 KB
ID:	2283603

  • #2
    I don't see a double footer. What browser are you using?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment

    Working...
    X