Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make Divi Buttons Fullwidth

Nelson Miller Profile Orange
This quick Divi Pro Tip will show you how to make a Divi button fullwidth to fill the width of the column and also how to center the button text.

▶️ Please watch the video above to get all the exciting details! 👆

missing sizing toggle settings in the button module

The steps are quite easy. Go to your Button module settings. Proceed to the Advaned tab and click to open the Custom CSS toggle. Then look for Main Element. That is where you need to past or write the following line of CSS:

width: 100%;
make divi buttons fullwidth

Now you probably notice an issue. The text is not centered. This looks bad to me, so let’s go in and add a second line of CSS to solve that.

make divi buttons fullwidth and centered

Beautiful! It doesn’t get any easier than that, does it! Now your Divi buttons are fullwidth in the column and the text is centered! I hope you enjoyed this little tip!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. Mandy

    I am SO happy I’ve discovered you. You have easily explained and solved half a dozen DIVI issues I’ve run into today. I’ll totally be linking to you in the resources section of my website. Thank you!

    Reply
  2. Hassam

    Quick fix. Thanks.
    I add `width: 100%` in advanced > Custom CSS and chose mobile view. As i want full-width for mobile devices only. Thanks for quick guide.

    Reply
    • Hemant Gaba

      Hi Hassam!

      Thanks for sharing the fix with us!

      Reply
  3. Sander Krijnen

    Hi Nelson,

    I’m using your code to place buttons next to each other.

    /*knopppen naast elkaar > plaats ‘inline-buttons’ in CSS Class in de rij*/
    .inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;

    }

    In that case the code from above doesn’t work. Do you know if there is another way of making the buttons full width for mobile?

    Thanks, Sander

    Reply
    • Hemant Gaba

      Hi Sander!

      If you’re looking for the buttons to be fullwidth on mobile and inline to each other on tablet and desktop, then we can use media query with your code. The code will be:

      @media all and (min-width: 767px){
      .inline-buttons .et_pb_button_module_wrapper {
      display: inline-block; }
      }

      Reply
  4. Bruno

    Thanks a lot :))

    Reply
  5. Alex Lopez

    thanks, and how about in the contact form?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Alex,
      That is totally different.

      /*make the contact form button container fullwidth*/

      .et_contact_bottom_container {
      width: 97%;
      }

      /*make the contact form button fullwidth*/

      .et_pb_contact_submit.et_pb_button {
      width: 100%;
      margin: 0 auto;
      }

      Reply
  6. Shahid Zafar

    Thank u so Much, Highly Appreciable!
    Love From Pakistan!!! 🙂

    Reply
  7. Ron

    Hi Nelson. Great tip but I miss the text align CSS in your post. In the video you explane it but not in this text of the post. Also live examples do not work.

    Reply
  8. Platt Johnson

    Works well and makes a cleaner looking page design. Thanks

    Reply
  9. Gio

    Simple but: great!!

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart