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.

Recommended ProductKinsta 2 months of free hosting

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.

Recommended Product

Rapyd WordPress Hosting
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 →

Previous

Create a LearnDash Course Page Template with Elementor Pro

Next

How to Change the LearnDash Focus Mode Logo URL

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

  8. Hello,

    I just stumbled on this article and It is exactly what I needed for my learnDash lesson pages. Extremely helpful CSS.

  9. Sandri

    Does this only work if your course page is called Courses? Do you need the LearnDash Elementor Integration plugin?

    • Hi Sandri — If you’re using the LearnDash-Elementor integration plugin, you shouldn’t need to use any of this. This was written before the LearnDash-Elementor integration came out, as a solution for those who were using Elementor Theme Builder templates without the integration.

      I’m not sure what you mean by “if your course is called Courses.” Are you referring to the custom label? If so, no, the custom label has no effect on this whatsoever. But if you mean only for LearnDash course pages (and not, say, for lesson or topic pages, than yes, it must be a LearnDash course page and not some other page).

  10. Kyla

    Is there an option to adjust just the width of the learn-dash lesson bit but not the whole page? This code is making the learndash stuff look great but the rest of the page wonky :S. Love it tho!

    • Hi Kyla – I’m not sure exactly what you mean.

      When you say “the width of the LearnDash lesson,” are you using focus mode? If so, you can control the width of the content area of focus mode from the LearnDash settings.

      If you’re not using focus mode, your theme controls the width of the lesson page. Either look for a way to adjust the width via your theme, or you’ll need different custom CSS to target lesson pages. I’d need more info on your set up to be able to assist further.

  11. Mel

    Didn’t work from me . I am using the hello theme

  12. Gemma

    Hi – I’m using Bookshelf theme and all of my course, lesson and quiz pages are all centred with left and right side bars on each page – I’ve tried to change these in my theme’s settings but it isn’t making any difference! Ideally, I need a left side bar and then the main content stretching the rest of the page. Any ideas on what I’m doing wrong? Thanks!

    • Hi Gemma – I’m not familiar with that theme, but I can tell you this:

      1. The course page layout is determined by your theme. LearnDash does not have any control over sidebars here. You’ll need to either find a theme option to remove them, customize the theme template files and created your own child theme, or get creative and hide them with CSS.

      2. Lesson & quiz page layouts can be overridden with LearnDash. Simply turn on “Focus Mode” in the LearnDash settings and this should transform your lesson and quiz layouts.
      https://www.learndash.com/support/docs/guides/focus-mode/

  13. Amber

    This is great for so many other things on my site, thanks!

    So, for my course page, I am using full-width, but I want the Learndash Content List at the bottom to be 960px, not full-width. I’ve been trying to adjust this for a few hours now.

    Is there any way I can manipulate the CSS you gave to only affect the Learndash elements?

    Thanks!

  14. Thank you! This was the fix I needed.

Leave a Reply

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