LearnDash Design & Tutorials

LearnDash Design & Tutorials

LearnDash Content Width & Page Builders

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.

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.

Previous

Create a LearnDash Course Page Template with Elementor Pro

Next

How to Change the LearnDash Focus Mode Logo URL

11 Comments

  1. Peter

    Excactly what I’ve been looking for. Thank you for this solution.

  2. This is what I was looking for. Thank you!
    Now, what about the featured image? How can it be put in the center of the page? Thank you in advance.

    • This will depend on your theme. Your theme controls the output & layout of the featured image on the course page.

      If you post a link to your course page, I might be able to help you with the CSS for it.

  3. Unfortunately, this isn’t working for me.

    • It’s possible that you’re using a theme that is not outputting the necessary HTML for this to work. It’s odd, but I have seen something similar before.

      What theme are you using? Can you post a link to your course page so I can have a look?

  4. newguy321123

    Bada bing, Bada boom !
    Dave does it again.

    Perfect using….
    Using WP 5.4.2
    Astra Pro 2.5.1
    Learndash 3.2.1

    Thank you.

  5. Joe

    thx very much for this. It worked for the course page, but I have the same problem for the lessons page. Do you have a CSS for the lesson pages?

    • The lesson page CSS will depend on whether or not you’re using focus mode. Please advise and I’ll try to help you with the CSS for a lesson page.

  6. Joe

    thx dave…i managed to get focuse mode turned on and it solved my problem. But FYI…i bought your pro plugin. very cool.

  7. Thank you so much! You SAVED me 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén