Thu, 2015-04-30 10:01
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.
Fri, 2015-05-01 23:36
#1
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.
Sat, 2015-05-02 08:24
#2
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.
Sat, 2015-05-02 14:23
#3
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