3 replies [Last post]
Nono
Nono's picture
Offline
Regular
Iasi, Romania
Last seen: 3 years 39 weeks ago
Iasi, Romania
Timezone: GMT+3
Joined: 2011-03-10
Posts: 23
Points: 42

Hi,
I am trying to move the footer to the bottom of the page but it does not seems to work.
link: http://baliweddingblog.com/contact/ (the darker line bellow)
I am using wordpress cms with DIVI theme.
I try to move the div above the closing of ; put it relative with margin-bottom:0 and so on ...
CSS:

 
/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/
 
 
	#footer-widgets { padding-top: 80px; }
		.footer-widget { float: left; width: 225px; margin: 0 60px 50px 0; color: #fff; }
		.last { margin-right: 0; }
			#main-footer .et_pb_widget { margin: 0; }
			#footer-widgets .fwidget { padding-bottom: 15px; }
			#footer-widgets .footer-widget li { padding: 0 0 10px 14px; position: relative; }
			#footer-widgets .footer-widget li:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border-style: solid; border-width: 3px; content: ""; left: 0; position: absolute; top: 9px; }
				#footer-widgets .footer-widget li a { color: #fff; text-decoration: none; }
				#footer-widgets .footer-widget li a:hover { color: rgba(255, 255, 255, 0.7); }
#footer-bottom { background-color: #1f1f1f; background-color: rgba(0, 0, 0, 0.32); padding: 15px 0 5px; }
	#footer-info { text-align: left; color: #666; padding-bottom: 10px; float: left; }
		#footer-info a { font-weight: 700; color: #666; }
	#et-footer-nav { background-color: rgba(255,255,255,0.05); }
		.bottom-nav { padding: 15px 0; }
			.bottom-nav li { display: inline-block; font-size: 14px; padding-right: 22px; }
				.bottom-nav a { color: #bbb; }
				.bottom-nav a:hover { color: rgba(187, 187, 187, 0.7); }
 
 
/*------------------------------------------------*/

<?php if ( 'on' == et_get_option( 'divi_back_to_top', 'false' ) ) : ?>
 
	<span class="et_pb_scroll_top et-pb-icon"></span>
 
<?php endif;
 
if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>
 
			<footer id="main-footer">
				<?php get_sidebar( 'footer' ); ?>
 
 
		<?php
			if ( has_nav_menu( 'footer-menu' ) ) : ?>
 
				<div id="et-footer-nav">
					<div class="container">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'footer-menu',
								'depth'          => '1',
								'menu_class'     => 'bottom-nav',
								'container'      => '',
								'fallback_cb'    => '',
							) );
						?>
					</div>
				</div> <!-- #et-footer-nav -->
 
			<?php endif; ?>
 
				<div id="footer-bottom">
					<div class="container clearfix">
				<?php
					if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
						get_template_part( 'includes/social_icons', 'footer' );
					}
				?>
 
						<p id="footer-info"><?php printf( __( 'Designed by %1$s | Powered by %2$s', 'Divi' ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p>
					</div>	<!-- .container -->
				</div>
			</footer> <!-- #main-footer -->
		</div> <!-- #et-main-area -->
 
<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>
 
	</div> <!-- #page-container -->
 
	<?php wp_footer(); ?>
</body>
</html>

Thank you for your time.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Nono, This should work in

Hi Nono,
This should work in most modern browsers.

#footer-main{
  position: fixed;
  top: calc(100vh - 53px);
}

where 53px is the height of the footer.

Nono
Nono's picture
Offline
Regular
Iasi, Romania
Last seen: 3 years 39 weeks ago
Iasi, Romania
Timezone: GMT+3
Joined: 2011-03-10
Posts: 23
Points: 42

Hi, The downside of your

Hi,

The downside of your suggested solution is that on the other pages, that have more content, the footer will be on the bottom of the screen even if the if is more content to show, not on the end of the page.

Thank you for your time.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try this

There are more elegant methods, but since the meme is not (IMO) appropriate to the web, I haven't updated in years.

http://gtwebdev.com/workshop/layout/footer-bottom.php

Be sure to view source and uncomment hidden content for comparison with long pages.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.