Weird Issue, Simple Fix
The Divi Blurb is great, and I use it a lot in website design. But it has a strange default setting – the content width is set to 550px. It’s very strange, but also very simple to fix. This is one of those answers that needs to be available on the internet. So in this tutorial, I will show you how to increase the default max content width of the Divi Blurb module.
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!
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.
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.
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.
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?
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.