Wordpress Full Width Footer Not Working

October 25, 2022 Post a Comment

I want to make my footer full width but its not becoming full with by assigning #footer:100%; Well, When i make the .container and .wrapper to 100% it become full width but content

Solution 1:

First of all you should place wp_footer(); just before body closing tag. Remove your footer div from any shared wrapper or container and insert it in an indipendent one. To this new wrapper add the width:100% rule.

EDIT

Do you see what you need?

enter image description here

EDIT 2

Your DOM tree looks like this:

<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
    <head></head>
    <body class="home page page-id-146 page-template-default" style="">
    <div class="inner">
        <div class="container">
            <div class="wrapper">
                <header class="logo">...</header>
                <div class="clear"></div>
                <nav>...</nav>      
                <div class="banner">...</div>
                <center>...</center>
                <div id="search3">...</div>
                <div id="content" class="test">...</div><!--content-->

                <div class="footer_background"></div>
                <div class="footer">...</div>
            </div><!--wrapper-->
            <div class="clear"></div>
        </div><!--container-->
    </body>
</html>

But it should looks like:

<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
    <head></head>
    <body class="home page page-id-146 page-template-default" style="">
    <div class="inner">
        <div class="container">
            <div class="wrapper">
                <header class="logo">...</header>
                <div class="clear"></div>
                <nav>...</nav>      
                <div class="banner">...</div>
                <center>...</center>
                <div id="search3">...</div>
                <div id="content" class="test">...</div><!--content-->
            </div><!--wrapper-->
            <div class="clear"></div>
        </div><!--container-->
        <!-- RIGHT PLACE -->
        <div class="footer_background">
            <div class="footer">...</div>
        </div>
        <!-- RIGHT PLACE -->        
    </body>
</html>

There's a WordPress Include Tags, called get_footer();. This function must be called in every page template ( except header.php and footer.php ). In your case it should be called outside from your .wrapper and .container div.

Remember to move wp_footer(); action from now position to just before </body> closing tag in order to avoid script block in wrong place etc, etc.

The CSS rule:

.footer_background {
width: 100%;
background-color: #6e6e6f;
}

.footer {
width: 902px;
height: auto;
font-family: arial;
padding: 0px 0 30px 0px;
margin: 0 auto;
}

Hope it helps, let me know if you get stuck!

EDIT 3

Example:

header.php

<html>
  <head>
  <!-- Header TAGS -->
  </head>
<?php wp_head(); ?>
<body>
  <div class="container">
  <div class="wrapper">

index.php

<?php get_header(); ?>

    <div class="content">
      <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
        <div class="post">
          <h2><?php the_title(); ?></h2>
          <p><?php the_excerpt(); ?></p>
        </div><!-- .post -->
    </div><!-- .content -->
</div><!-- .wrapper -->
</div><!-- .container -->
<?php get_footer(); ?>

footer.php

<div class="footer_background">
  <div class="footer">
    <!-- Your footer blocks -->
  </div>
</div>

<?php wp_footer(); ?>
</body>
</html>

Html5 Learning

Wordpress Full Width Footer Not Working

Solution 1:

Post a Comment for "Wordpress Full Width Footer Not Working"