How to Change the LearnDash Page Content Width
How to Change the LearnDash Page Content Width
If you are using LearnDash to create content you may have run into the need to change the width of the LearnDash layout page for your course, lesson, or topic. Most often this will be needed because you want the look of your LearnDash pages to more closely fit the look of the rest of your site.
In general, LearnDash doesn't give you much control over the width of the page content. If you are using LearnDash 3.0 and have the option enable for focus mode then you have a few additional built-in options (though focus mode comes with it's own set of issues.) In many cases, changing the width of the page is going to require adding some specific CSS rules to your site.
The options that you have are going to be dependent on which LearnDash theme you are using and which sub-feature you have enabled. I'm going to walk you through what you need to do in each case. Please keep in mind that the theme you are using can have a significant effect on setting the LearnDash page width and content container width (Astra certainly falls into this category). So if the below doesn't work quite the way you expect, look into your theme settings to see if there are options that are overriding the below.
How to Make the CSS Changes
Some of the instructions below require CSS rule changes to your site. These rule changes can be made via multiple different methods depending on your site configuration, plugins you have installed, and your personal preferences. If you need help with this, just get in contact with me and I'll see what I can do for you. But basically, you would change your CSS rules by one of three methods:
- Using the WordPress Customizer and adding it to the Additional CSS panel (Appearance > Customize > Additional CSS)
- Edit the style.css file of your active theme (Appearance > Theme Editor > [your theme] > style.css). Personally, I don't recommend this method.
- Use a CSS editor such as Microthemer to make all your changes. This is the way I do the vast majority of my edits.
I won't be showing how to do any of the methods above, but if you have questions about it just drop me a note and I just might be able to help you out.
The General CSS Rules
The specific rules that you will use on your site is up to you and your styling / layout preferences. However, it will always (well, most of the time) follow a basic structure.
First, you define the the selector so you are specific about what elements on the page you want to target. Then you define the CSS property to set along with its value. Here's a general example of what you would put into your CSS file. It sets the width of a LearnDash course page to 72em, puts some margin on the sides, and some padding all around.
/* Selects the larger Learndash content area */
.single-sfwd-courses .sfwd-courses {
max-width: 72em;
margin: 0 auto;
padding: 2.5em 1em;
}
/* Selects the inside Learndash content only area */
.single-sfwd-courses .sfwd-courses .learndash_post_sfwd-courses {
max-width: 72em;
margin: 0 auto;
padding: 2.5em 1em;
}
Targeting Lessons or Topics
You can use similar CSS targeting rules just by replacing "courses" with either "lessons" or "topics". For example, .single-sfwd-courses becomes .single-sfwd-lessons.
Note that these rules affect only the layout for course / lesson / topic content areas. That is, the actual LearnDash content. It does not affect other areas of the page such as your headers, sidebars, or page-builder content you have created outside of the LearnDash content.
Compatibility with LearnDash 2.x & 3.x Theme
The LearnDash 2.x theme has been replaced by the 3.x theme, but it's possible that you might still be using it and haven't converted your site to the new theme. But regardless, the custom CSS targeting should work with either LearnDash theme.
Note that if you are using the LearnDash Focus Mode, these CSS code selectors will not work as Focus Mode completely changes out the CSS.
More Questions?
If you happen to get stuck implementing the above CSS code, feel free to give me a shout (you can just drop in a comment.) Also, to help you out better please leave a link to your example page if it's publicly available.