If you’re using a page builder like Elementor or Beaver Builder with LearnDash, you might be having an issue with your LearnDash course page. The content you add via Elementor is centered on the page, but the LearnDash progress bar at the top, and the “Course Content” table at the bottom, are stretched out to 100% of the screen.

Take a deep breathe. I’ll show you a really simple fix that takes under a minute.

The Why

I’ll briefly explain why this happens.

When you edit an individual page (page, post, course page, etc.) with a page builder, the page builder inserts the content into the main content area, which is defined by WordPress. It has no idea that LearnDash is inserting its own content dynamically. So the page builder only controls the middle section of the page, and has no control over the dynamic LearnDash elements.

The Fix

The fix is quite simple, but does require a few lines of CSS. You can add this code in one of two places. Either…

  • the style.css file of a child theme (more technical), or
  • the “Additional CSS” area of the Customizer (Appearance > Customize) (quickest & easiest)
.single-sfwd-courses .learndash_post_sfwd-courses {
	max-width: 1000px;
	margin: 0 auto;
	padding: 2.5em 1em;
}

Update the 1000px value to whatever width you’d like.

The Breakdown

This code does a few things:

  • the max-width sets the maximum width for all elements on the page, including the dynamic LearnDash elements. So even your page builder widgets/modules will only be able to expand this wide.
  • the margin: 0 auto; sets the top & bottom margin of your main content area to 0, and your left & right margin to auto. When both the left & right margins are set to auto, the content is centered on the screen.
  • the padding: 2.5em 1em; creates some space on all 4 sides of the content area. The 2.5em is the top & bottom spacing, which is helpful on both large & small screens alike. The 1em is the left & right spacing, which really only comes into play once the screen size drops below your max-width. This ensures the LearnDash content doesn’t run into the edges of the screen on smaller devices.

Now that you understand the padding values, you can update those as well. And feel free to use px instead of em if you’re not sure what ems are. That’s a CSS lesson for another tutorial 😜.


The Alternative

The above option is by far the one that most of you should choose. However, if you want to try something different, or you want to be able to add fullscreen content to the main content area of your LearnDash courses, there is another option that utilizes Elementor Pro’s Theme Builder.

How to create a LearnDash course page template with Elementor Pro →

Feel free to give me a shout in the comments if you’re having trouble getting this to work. And please leave a link to your course page if it’s publicly available.