Focus Mode: Content Spacing (Padding)

When viewing a lesson, topic or quiz in LearnDash’s focus mode, there’s a lot of space above the title at the top. LearnDash adds 5em of padding all the way around focus mode’s main content area. It’s pretty easy to reduce that spacing, but we need to keep all screen sizes in mind.

I’ll walk you through a few different ways to reduce the spacing in LearnDash focus mode, not only at the top of the page, but on all sides of the main content.

Understanding Focus Mode Sections

Before we get into the code, it’s important to understand what I’m referring to when I say the “main content.” Focus mode is essentially broken up into 3 parts:

• Header: The bar that runs the entire length of the screen, at the top. It includes the logo, progress bar, next/previous navigation buttons, mark complete button, and the user’s name & avatar.
• Navigation: This is the long vertical section on the left side of the page. It includes links to all lessons, topics & quizzes within the current course you’re viewing.
• Main Content: Everything to the right of the Navigation. This starts with the page title, then the breadcrumb links, then whatever content you add to the editor for that piece of content, then the list of topics or a quiz (if you’ve added topics to a lesson or a quiz to a lesson or topic), and finally, comments, if you’ve enabled them.

Now that we’re on the same page about the “main content” area of LearnDash focus mode, let’s dive into some code.

If you’d prefer to watch the full video explanation:

LearnDash applies 5em of padding on all sides of the main content. The code they use looks like this:

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	padding: 5em;
}

Top Padding

If you just want to adjust the spacing above the page title, you can just add a new piece of CSS that applies to the top padding only.

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	padding-top: 3em;
}

This will reduce the top padding from 5em to 3em. Feel free to adjust 3em to get your desired spacing.

Smaller Devices (<640px wide)

Once the screen drops below 640px wide, LearnDash changes the padding, and adds a margin. This will override the CSS we just used above, so we need to add some additional CSS to take care of devices under 640px wide.

Now LearnDash is adding a 30px top margin and a 50px bottom margin. And they’ve updated the padding to be 5% on the top and bottom. I think this creates too much spacing before the title, so this code will reduce it.

@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 {
		margin: 30px auto 50px;
		padding: 0 1.5em 5%;
	}
}

This keeps the 30px top margin, but changes the 5% top padding to 0. So you’ll just have 30px of spacing between the focus mode header and your page title.

If you want to add a little more spacing, just adjust the 30px in the margin line above.

Spacing on All Sides

You can apply very similar CSS to adjust spacing on all sides of the main content in focus mode. When adding 4 values to padding, they go in this order: top right bottom left. So in this example, we’re adding 1px of padding to the top, 2px to the right, 3px to the bottom, and 4px to the left.

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	padding: 1px 2px 3px 4px;
}

Simply adjust each of those values to get your desired spacing.

Be sure to test on screens below 640px wide. Use the code in the “Smaller Devices” section above to apply a different spacing to smaller devices, otherwise the LearnDash default spacing will kick in for all screens below 640px wide.