Sometimes we use affiliate links. We may be compensated if you use our links to make a purchase. Rest assured, we are extremely selective in who we partner with, and only recommend products we wholeheartedly 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.

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.

.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 🙂.