GeneratePress + TUTOR LMS conflict

Hi there,

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

Deactivated.

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%;

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?

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%;
    }
}

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.

Glad to be of help!