Buttons for “next lesson” and “previous” lesson are off-center

The only thing I can think of that I haven’t checked in all the menus is the WP Ocean (theme) template for lessons. Each lesson is set to “theme” under the template, but I can’t find this template anywhere inside the WordPress panel.

I asked about this in the Facebook group but was referred to this forum for this question. However, I still haven’t figure out a solution or heard from anyone who has. The problem persists when I try changing my active theme from Ocean WP to Astra.

Would you have any ideas for this @nrherron @jnr4u2 ?

It would be a great help

Hi @superdep we apologize for the late response here, our tech support team is super overwhelmed at the moment.

I’m not as adept with CSS as other members of the team, but does it work for you if you try this CSS in the Customizer under ‘Additional CSS’:

.llms-course-navigation .llms-prev-lesson, .llms-course-navigation .llms-next-lesson, .llms-course-navigation .llms-back-to-course {
width: auto;
}

Hi Will

Thanks for trying. Unfortunately, it does not change anything visibly.

Hi @superdep

Could you please clarify if you’re talking about the button itself or the text inside the buttons?

Let us know as soon as you can.

Regards,

It would be good to have the option to center the text. But primarily I mean the position of the buttons. It looks quite bad currently IMHO (see image at start of thread)

Hi @superdep

Please try this CSS:

.llms-course-navigation .llms-prev-lesson, .llms-course-navigation .llms-next-lesson, .llms-course-navigation .llms-back-to-course {
    width: unset !important;
}

If you’d like to center the text as well please let us know!

Thanks and take care,

• This reply was modified 3 years, 5 months ago by Natalie.

Hi @nrherron
I see no change when using this, unfortunately.
I have been trying to experiment myself but with no luck.

Hi @superdep

Is there a free lesson or can you set up a free lesson or two where we can see the navigation buttons directly to fine tune this CSS to your site?

Let us know if you have any questions on how to set this up!

Thanks and take care,

Thanks a lot for all these answers @nrherron !

I have set up the first two lessons to be free. And since I prefer a bit of privacy, I hope it’s okay that I link to my website through a URL shortener:
https://bit.ly/3hkUx5Z

I tested it today on an iPad where the buttons surprisingly showed up in the center – just as side info.

Hi @superdep

Thank you for the link and the free lessons!

We were able to take a look!

Please try this CSS

.llms-next-lesson .llms-lesson-preview {
    float: right;
}

You are welcome – sorry for all the content being in Danish ??

I have added the CSS, but I don’t see any change, unfortunately.

What is curious to me is why I’m seeing this problem if it’s not typical. I don’t see that I have changed anything that could cause this.

Hi @superdep

No worries at all ??

You may need to add !important after right in the code.

If that doesn’t work, please let us know and I’ll see if one of our engineers can shine a light on why this isn’t working!

Please let us know if you have any further questions!

Thanks and take care,

Hi @nrherron

Sorry for the trouble. But I have tested it again and again with different codes and it has not been fixed.

It is showing up pretty well on iPad and on my phone, but on desktop, it continues to be aligned left.

I think the reason why it looks better on phone is simply that the screen is so small that it doesn’t look off-center.