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 to0
, and your left & right margin toauto
. When both the left & right margins are set toauto
, the content is centered on the screen. - the
padding: 2.5em 1em;
creates some space on all 4 sides of the content area. The2.5em
is the top & bottom spacing, which is helpful on both large & small screens alike. The1em
is the left & right spacing, which really only comes into play once the screen size drops below yourmax-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 em
s 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.
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 →
Peter
Excactly what I’ve been looking for. Thank you for this solution.
Ruben
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.
Dave Warfel
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.
Stephen Huneycutt
Unfortunately, this isn’t working for me.
Dave Warfel
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?
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.
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?
Dave Warfel
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.
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.
Dave Warfel
Sweet! 🙌
Rafal
Thank you so much! You SAVED me 🙂
SONNY BEHARRY
Hello,
I just stumbled on this article and It is exactly what I needed for my learnDash lesson pages. Extremely helpful CSS.
Dave Warfel
🙌
Sandri
Does this only work if your course page is called Courses? Do you need the LearnDash Elementor Integration plugin?
Dave Warfel
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).
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!
Dave Warfel
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.
Mel
Didn’t work from me . I am using the hello theme
Dave Warfel
If you can share a link to your page, I might be able to help.
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!
Dave Warfel
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/
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!
Dave Warfel
Send me a link to your course page and I can help with the CSS. dave@escapecreative.com
Terrill Thomas
Thank you! This was the fix I needed.
Dave Warfel
🙌