Adding full width blocks to LearnDash course step content

  • 22 hours ago
  • Team Tangible

LearnDash’s popular “Focus Mode” doesn’t support full and wide widths built with the WordPress block editor, by default. This can be a pain, especially when trying to embed interactive elements, or when you want to break up content with more visually interesting elements. The following CSS, last tested with LD v4.21.5, will handle everything for you, just modify the custom properties at the top as needed!

/* Set up CSS variables for normal and wide content widths, and inline (left and right) and block (top and bottom) padding. To customize the layout, simply adjust these values as needed */
:root body.ld-in-focus-mode:not(.search) {
  --focus-content-width: 800px;
  --focus-wide-width: 1400px;
  --focus-inline-padding: 1.5rem;
  --focus-block-padding: 4rem;
}

/* Stretch the LearnDash focus mode content area to fill all available space. Individual component widths will be constrained individually below */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content {
  width: 100%;
  max-width: 100%;
  padding: var(--focus-block-padding) var(--focus-inline-padding);
}
/* Style blocks that have neither the alignfull nor the align wide classes applied. Auto margin is applied to center content in the available space */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--focus-content-width);
  margin-left: auto;
  margin-right: auto;
}
/* Style align wide blocks to fill available space until they've reached the defined wide width */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content .alignwide {
  max-width: var(--focus-wide-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Style align full blocks to stretch to the edges of the available content area. Negative margin and larger than 100% wide to account for the padding applied to the ld-focus-content container */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content .alignfull {
  margin-left: calc(-1 * var(--focus-inline-padding));
  margin-right: calc(-1 * var(--focus-inline-padding));
  width: calc(100% + var(--focus-inline-padding) + var(--focus-inline-padding));
}
/* Apply normal content width to LearnDash elements: title, status bar, tab navigation, footer actions, quiz content, comments, and alerts. You can wide-align these too if you like, by applying the --focus-wide-width variable instead */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content > h1, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .learndash-shortcode-wrap, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tabs-navigation,
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-content-actions,
.learndash-wrapper .ld-focus .wpProQuiz_content,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-quiz-status, 
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-topic-status, 
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-lesson-status, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-comments, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-alert {
  max-width: var(--focus-content-width);
  margin-left: auto;
  margin-right: auto;
}

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

CSS Video

Report

Harassment or bullying behavior.
Contains misleading or false information.
Contains abusive or derogatory content.
Contains spam, fake content or potential malware.

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts

Please allow a few minutes for this process to complete.

Report

You have already reported this .

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.