Select Page

full-width Divi footer


I don’t know about you but just about every site I build with Divi I end up setting my header full-width as it the style I tend to like but the issue for me is that there no option in Divi to do same with the footer.

Today I’m going to show you in a very short tutorial because it pretty simple to do, so let’s get down to the CSS to have a full-width footer.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Buffer
  • Pinterest
  • reddit
  • StumbleUpon

Let’s first make the bottom bar with our copyright in it full-width

Now let’s make the main footer area full-width, I am assuming you would like this section to be full width as well.

if you made both your footer sections full-width then maybe replace the previous two line of code with just this one line of CSS.

Some your widget might overlap due to the width not being very wide by default so we will add the following to line to make our widgets take up their full-width of it column.

7 Comments

  1. Clive
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Thanks James – Just what I needed – works perfectly 🙂

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Glad you found it useful :), you can adapt this idea for other things as well like sidebar items 🙂

      Reply
  2. Verdi
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Thank you very much James! You just made it possible to fit an entire horizontal footer menu, even on smaller screens!

    One question, is it possible to center align just the menu, not the rest of the footer?

    Reply
  3. AJC
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    James, please advise where to enter the CSS? I’ve already made amendments to the standard footer text by adding CSS code to the integration tab of the Divi Theme Options. When I add your code there are some errors.

    Reply
  4. Julius
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Saved my day. Thanks so much

    Reply
  5. Ahmad
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Thanks, Mr Fosker.

    Very Helpful, and aesthetically pleasing as well.

    Ahmad

    Reply
  6. JJ
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Just what I needed. Thank you and thanks to Google for getting me here. For some reason, it wasn’t centered on my child theme. Removing the following bit seemed to fix that.

    margin-right: 2.773%;
    margin-left: 2.773%;

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 5 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.