Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

If you’re using Divi along with LearnDash Focus Mode, you might be running into some issues. The most common issue is that the Focus Mode width you set in your LearnDash settings is not being respected. Content is appearing on the page with a very small width, as opposed to taking up the full screen or full width of the content area.

This article will briefly explain the issues with Divi & Focus Mode, and provide solutions for fixing them.

Divi & Focus Mode Width Issue

Is your content not stretching the full width of the content area in Focus Mode? I’ve seen this happen with video embeds, as well as lessons & topics that have very limited content (only a few words or one sentence). As you write more, the width expands with your content.

This is happening because Divi adds a <div> to the Focus Mode markup that most other themes don’t, and this causes a CSS conflict. You can see this extra <div> in the screenshot below (highlighted in blue).

Code for Divi with LearnDash focus mode

The Solution

To fix this issue, use the following CSS code.

  1. Navigate to Appearance > Customize
  2. Click on Additional CSS
  3. If CSS is already present, put your cursor at the bottom on a new line
  4. Paste the following CSS
  5. Click the “Publish” button at the top
.learndash-wrapper .ld-focus .et-boc,
.learndash-wrapper .ld-focus .et-boc .ld-focus-main .ld-focus-content {
	width: 100%;
}

That’s the only consistent Divi/LearnDash issue we’ve discovered so far, but if you are having other issues, please let us know in the comments so we can update this article.