[Resolved] GeneratePress + TUTOR LMS conflict

[Marian]

Hello,

I’m using GP with Tutor LMS. I have created a course and noticed that apart from a horizontal scrolling/overflow problem on both desktop, mobile scrolling in a lesson doesn’t work. It simply won’t let me scroll up, like it’s stuck or something. I’ve been chatting with Tutor tech. support guys, but we seem to have started running in circles. Kinda hard to explain, the scrolling issue I mean, so I’m attaching some screenshots and videos to get a better idea.

Image 1
Image 2
Video: Scrolling problem
Overflow

Thanks for any pointers.

[David]

Hi there,

can you disable Autoptimize so i can take a look at whats going on ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marian]

Deactivated.

[David]

So the overflow is due to this CSS:

.tutor-container, .tutor-container-fluid, .tutor-container-sm, .tutor-container-md, .tutor-container-lg, .tutor-container-xl, .tutor-container-xxl {
    width: 100%;
    padding-right: var(--tutor-gutter-x, .75rem);
    padding-left: var(--tutor-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
}

The width: 100% plus the padding makes the elements too wide for the screen. Creating overflow.

They are making the assumption that the theme is adding box-sizing: border-box; to all elements.
Which is quite common nowadays and GP does if you set the Customizer > General --> Structure to Flexbox.

If for whatever reason you don’t want to switch to flexbox structure ( note that the change is a permanent change ). Then you can add this CSS.

html {
    box-sizing: border-box;
}
body, * {
    box-sizing: inherit;
}

The scrolling issue, is caused by this CSS of the plugin:

@media (max-width: 1199.98px) {
    .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open .tutor-course-single-sidebar-wrapper {
        background-color: #fff;
        height: 100%;
        right: 0 !important;
        overflow-y: auto;
        opacity: 1;
        z-index: 1026;
    }

    .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open .tutor-course-single-sidebar-wrapper .tutor-course-single-sidebar-title {
        position: sticky;
        top: 0;
        z-index:1027
    }
}

The height: 100%; is the issue, if they want to restrict the height then set it to max-height: 100%;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marian]

David, that is just amazing. I’ve changed the structure to Flexbox, no problems. All overflow issues are sorted.

Now about the scrolling, I changed the “height” parameter to, say, 15% and then I could scroll no problems (but the panel was short of course). When I change the parameter to max-height: 100%; the scrolling still won’t work correctly. Is there something I can modify in CSS or I should contact them now to rectify it?

[David]

You should get the plugin author to fix it, but you can try this CSS to rectify the problem:

@media (max-width: 1199.98px) {
    .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open .tutor-course-single-sidebar-wrapper {
        height: auto !important;
        max-height: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marian]

Thank you very much! The css didn’t quite work as expected, but for now I’ll temporarily sort it out by specifying the height. However, it’s definitely a perfect springboard to solve the issue permanently. I’ll notify the plugin creator about your findings. Thanks again, you’ve been a great help.

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts