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.
In our Design Upgrade Pro plugin, we offer the ability to set focus mode content to run from edge-to-edge. The left navigation bar will still be present, but the rest of the content area will span from the right edge of the navigation, right up to the right edge of the user’s browser.
This is great for those creating content with page builders. You can use your own spacing via the page builder elements/widgets, and build more creative layouts.
Our plugin only provides the option to do this globally, for every single piece of content in focus mode. This includes all lessons, topics & quizzes. But what if you want to only apply it to topics? Or only to quizzes? This tutorial will show you how.
NOTE
Design Upgrade Pro also lets you hide the page title & breadcrumbs so you can truly build your entire lesson/topic/quiz with a page builder.
LearnDash Focus Mode Edge-to-Edge CSS
Let’s walk through the CSS to make this happen. I’ll explain how to adjust it for different content types (lessons, topics, etc.).
The main content area for focus mode has the following class: .ld-focus-content
By default, LearnDash adds a max-width to this content, as well as some padding. To get our content to stretch from edge-to-edge, we need to remove both of these. We also need to be specific enough with our CSS so that it overrides LearnDash’s CSS.
The code looks like this:
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
max-width: unset;
padding: 51px 0 0;
}This will apply to EVERYTHING that uses focus mode. How do we target only lessons, only topics, etc.? We need to use the class that LearnDash puts on the <body> element, which denotes which type of content it is.
- For lessons:
.single-sfwd-lessons - For topics:
.single-sfwd-topic - For quizzes:
.single-sfwd-quiz
Choose which one you want to apply edge-to-edge content for, and add this class to the beginning of our code. Here’s an example for lessons only:
.single-sfwd-lessons .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
max-width: unset;
padding: 51px 0 0;
}What’s the 51px of top padding for? That’s to account for the height of the top bar in focus mode, which is 51px tall.
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.
Get 25% OFF Rapyd Today →
Smaller Devices / Mobile
LearnDash applies additional CSS for small screens. We add the following to adjust the spacing on smaller devices:
@media (max-width: 640px) {
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content,
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content {
padding: 0;
margin: 0;
}
}Other CSS Tweaks
There are a handful of other styles we adjust when making content stretch from edge-to-edge. Most of these are because a page builder cannot be used to edit them. They are inserted dynamically be LearnDash, and they need a little space away from the edges of the screen.
This gives some spacing around the next/previous buttons at the bottom.
.ld-focus-content .learndash-wrapper .ld-content-actions {
padding: 1em;
}This creates some spacing for any topic or assignment lists, quiz embeds or alerts.
.ld-focus-content .ld-topic-list,
.ld-focus-content .ld-assignment-list,
.ld-focus-content .ld-alert,
.wpProQuiz_content {
margin: 1em;
}If you’re using materials, this adds some space on the left & right of your materials so they don’t run up against the edge of the screen.
.learndash-wrapper .ld-tabs .ld-tabs-content div[id^="ld-tab-materials"] {
margin: 0 1em;
}If you’re using comments in focus mode, this creates space for them.
.learndash-wrapper .ld-focus-comments {
margin: 2em 1em;
}If you’re still showing the page title, this CSS will give it a little breathing room.
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content > h1 {
padding: 0.5em;
}And finally, if you are showing breadcrumbs, they look weird if they have rounded edges while touching the edges of the screen, so we remove the border-radius.
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.
• Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
• Trusted by 30,000 companies
Get 10% OFF with code affiliate10-dwarfel
.ld-focus-content .learndash-wrapper .ld-breadcrumbs {
border-radius: 0;
}Final, Full CSS
Here’s the CSS in its entirety. Adjust/Delete the first few lines to only use the one(s) you want.
.single-sfwd-lessons .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
max-width: unset;
padding: 51px 0 0;
}
.single-sfwd-topic .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
max-width: unset;
padding: 51px 0 0;
}
.single-sfwd-quiz .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
max-width: unset;
padding: 51px 0 0;
}
.ld-focus-content .learndash-wrapper .ld-content-actions {
padding: 1em;
}
.ld-focus-content .ld-topic-list,
.ld-focus-content .ld-assignment-list,
.ld-focus-content .ld-alert,
.wpProQuiz_content {
margin: 1em;
}
.learndash-wrapper .ld-tabs .ld-tabs-content div[id^="ld-tab-materials"] {
margin: 0 1em;
}
.learndash-wrapper .ld-focus-comments {
margin: 2em 1em;
}
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content > h1 {
padding: 0.5em;
}
.ld-focus-content .learndash-wrapper .ld-breadcrumbs {
border-radius: 0;
}
@media (max-width: 640px) {
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content,
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content {
padding: 0;
margin: 0;
}
}I hope this helps explain how to get your focus mode content to stretch the entire width of the content area, and start using a page builder to create more beautiful, engaging content 🙂.
Alex
As of now I have to disable LearnDash Focus Mode in order for my Single Lesson (elementor template) to apply to every single lesson.
I was wondering if can still use LearnDash focus mode together with Elementor single template since I require some dynamic functionality elementor offers. Is there a way to hook it onto my single template or have the single template only apply to the Focus Mode section?
Dave Warfel
Hi Alex,
You cannot use a Single Lesson theme builder template AND LearnDash Focus Mode at the same time. You have to choose one or the other.
If you only want to use Elementor within the main content area of a lesson, but still use the focus mode layout for the header & left sidebar, you can do that. But you won’t use a Single Lesson template. You’ll go to edit the individual lesson, and just edit it with Elementor. You should still be able to use dynamic content, custom fields, etc. this way.
Iana Galai
Hi Dave! I am trying to get rid of the padding that appears when I insert a quiz shortcode into the text widget. Somehow, the whole thing shifts at least 30 px down… Do you know how it could be resolved? Thanks a lot!
Dave Warfel
This is due to the CSS that LearnDash adds for its quizzes when they are inserted via shortcode. I emailed you personally with a solution to override LearnDash’s CSS.