How To Increase The Divi Blog Content Width Tutorial by Pee Aye Creative

How To Increase The Divi Blurb Content Width

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to change and increase the default max content width in the Divi Blurb module.
Categories: Divi Blurb Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Change The Divi Blurb Content Width

Open up the Divi Blurb module settings and go to the Design tab. Then open the Sizing toggle, and you will notice the Content Width setting is set to a default value of 550px. This is odd. Why not make this 100% instead? Good idea!

default Divi Blurb content width

All you need to do is write 100% in the input field, and presto! The Blurb will now fill the entire width of its parent column or row.

how to change the Divi Blurb content width

Now, when the screen resizes, you won’t see the Blurb awkwardly max out on width. Of course, you could set it to any other value you want, but 100% makes a lot of sense to me and this is something I do on every site.

PRO TIP: Right-click on the Content Width setting and select Apply Style To Active Preset. This will update all the Blurbs (using the default preset) and set the default content width to 100% on all the Blurb modules on your site.

apply Divi Blurb content width style to active preset

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

3 Comments

  1. Stacey

    Interestingly, I use the blurb module a lot, and my clients (frustratingly) like to have me insert LONG urls inside blurbs… the oddball preset often helps with the wrapping problems associated with long urls and narrow columns (without having to introduce white-space CSS into the blurb.) Weird, I know… and rather random (and most likely unintentional) but the flip side is content that produces a wrap that’s not outside the blurb container. Of course, I frequently end up changing the content width to 100% and introduce either word-break, word-wrap or some sort of white-space CSS — but if a user is unsure about this, sometimes the seemingly arbitrary preset does help with the problem. Just me two cents.

    Reply
  2. Renelle

    I have a problem with a blurb with an icon. It looks fine with the icon on the left on desktop view, but in mobile view, the icon is centered and the text is not. How do I fix that?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I don’t think that question is related to our tutorial. You can adjust the alignment settings, and if something is not working please contact Elegant Themes.

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart