- This topic has 7 replies, 2 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
September 17, 2022 at 3:42 am #2345610Marian
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
OverflowThanks for any pointers.
September 17, 2022 at 5:54 am #2345689DavidStaffCustomer SupportHi there,
can you disable Autoptimize so i can take a look at whats going on ?
September 17, 2022 at 5:57 am #2345690MarianDeactivated.
September 17, 2022 at 6:27 am #2345706DavidStaffCustomer SupportSo 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 theCustomizer > 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 tomax-height: 100%;
September 17, 2022 at 7:00 am #2345733MarianDavid, 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?
September 17, 2022 at 8:03 am #2345891DavidStaffCustomer SupportYou 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%; } }
September 17, 2022 at 8:12 am #2345904MarianThank 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.
September 18, 2022 at 6:27 am #2346466DavidStaffCustomer SupportGlad to be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.