Course title not responsive (showing badly on mobile)

Hi @superdep,

You should be able to make changes to the title/header size by going into Appearance->Customize and depending on the theme here may be a dedicated text editor where you can change the header sizes or it will be under General Settings and Fonts.

If you can send us a screenshot or the customize options we can help guide you to the proper settings from there!

Let us know if you have any further questions!

Thanks and take care,

@nrherron Thanks again.
What I’m curious about here is if this is a problem you see a lot? Since I have simply set a title and this shows badly on mobile, I would guess this happens very often – I don’t see any reason why my page should be different other than that the title is a rather long word.

Even if I’m able to change the size in the theme settings, I feel like this should be set based on device type – like I normally do in Elementor. If I make it very small, it will look weird on the desktop, and if I keep it (normal size on desktop) it will show up badly on mobile (like the picture above). Just trying to understand the logic of the system and your suggestion here ??

Here is an image under font type – everything is in Danish though:
https://ibb.co/NLW2dvW

Hi @superdep, sometimes themes have different settings for font sizes based on devices, but if your theme doesn’t offer that, one thing you could consider is to edit the course page with Elementor in ‘Elementor Canvas’ mode. (video tutorial on how to active Elementor on courses: https://www.youtube.com/watch?v=mni2eVCDEf4 )

That will give you a full page to add in headings, etc. and style with Elementor where you can set desktop and mobile settings. That may be a good solution for your case, especially if you like editing in Elementor. You’ll want to use LifterLMS Shortcodes in order to make sure your syllabus shows up and any other LifterLMS items you’d like to add to that page: https://lifterlms.com/docs/shortcodes/

Do you think that solution would work for you? For users who are looking to go super deep into LifterLMS and Elementor, we also recommend the Tangible: Lifter Elements tool if you wanted to check that out for super-specific options for your margins, colors, etc. inside Elementor itself.

Thank you for a thorough response, Will.

I think Ocean works pretty well with different devices overall. The problem is this title specifically.

For now I think I’ll just go with a simple solution and change the title on the front page since I have had so much trouble with the page breaking down previously.

But in time I might give it another go and see if the problems were all due to me doing things the wrong way in Elementor with the Lifter page.

One question though: If I do try to do it through Elementor, it would be nice to edit on a copy of the current page, so I can quickly switch back if it breaks down again. Is there an easy way to do this?

No problem, I think Elementor would be a good route if you’re already using that on your site. (it also opens up some more possible design options)

You could ‘Clone’ the course and work on that clone to make sure everything will go according to plan, then delete the clone and implement the changes on the live course to test things out: https://lifterlms.com/docs/clone-lifterlms-course/

Thanks Will! sounds good

I have been testing out Elementor again now for this purpose and using shortcodes.

Two questions come up:

1) The main idea of this was to edit the title on the front page and to make this responsive. But that seems to be outside the scope of Elementor. I can’t click into that part of the page. So maybe Elementor just can’t do this? Under settings, I set Elementor up with permissions to edit every single type of content.

2) When I set up a course syllabus, it looks much different from the default one in the blocks editor. Is this the expected result? There is no graphic, just plain text and I actually liked the default one that came up when going with the blocks editor.

@willmiddletonlifterlms could you give some inputs here? I’m quite far into this little side step of my process, so would be a great help.

@willmiddletonlifterlms @nrherron
Could either of you help to solve this?

In the meantime, I tried continuing with my current solution, using the default editor, just because I know it is stable. But some things are quite bad in layout. For instance, I can’t fully justify text, and when I use plugins that enable this function, the blocks stop working with Lifter LMS – the functionality to show certain content to i.e. logged-in users versus visitors, only works with a few plugins.

Therefore I’d still very much like to have the Elementor solution working.

Hi @superdep

1) The main idea of this was to edit the title on the front page and to make this responsive. But that seems to be outside the scope of Elementor. I can’t click into that part of the page. So maybe Elementor just can’t do this? Under settings, I set Elementor up with permissions to edit every single type of content.

We’d really recommend reaching out to Elementor about this. They’re going to be the experts on their plugins functionalities and what’s possible/how to accomplish it.

2) When I set up a course syllabus, it looks much different from the default one in the blocks editor. Is this the expected result? There is no graphic, just plain text and I actually liked the default one that came up when going with the blocks editor.

Are you using the course syllabus shortcode: https://lifterlms.com/docs/shortcodes/#lifterlms_course_syllabus or the course outline: https://lifterlms.com/docs/shortcodes/#lifterlms_course_outline

The outline is going to be like the sidebar widget with just plain text and collapsibility, where as the syllabus shortcode will look more like the main syllabus added to the course by default!

Please let us know if you have any further questions or if there is any strangeness with the syllabus shortcode!

Thanks and take care,