[adrian.wilde@choiceshomes.co.uk]

Hi, the quiz results table on all the pages is slightly cut off on the right due to width issues which is causing a scroll bar to be shown and if you don’t scroll all the way to right the right of the table is cut off the screen which gives it an unprofessional look and feel for the user experience. Please see the video below for clarification:

https://www.loom.com/share/d0736a02ddcb45c7bd3aeabf848beaf6?sid=364f223b-0f06-4d0b-acd6-b6610aa98d5c

Thanks.

[serkan]

Hi Adrian
Thank you for sharing the video—it clearly shows the table width issue causing the unwanted scrollbar and cutoff. This is definitely not the experience we want for your users, and I’ll help you resolve it quickly.

Steps to Fix the Table Width Problem:
1. CSS Fix (Recommended)
Add this custom CSS to Appearance > Customize > Additional CSS:

.quiz-results-table {
  width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important; }
.quiz-results-table table {
  min-width: 100% !important; }

(Adjust the class .quiz-results-table if your table uses a different class/ID.)

2. Check Container Settings
If you’re using a page builder ensure the table’s container/section has:
Content Width: Full Width
Columns Gap: No Gap

If the Issue Persists:
Please share:
The quiz plugin name (if used).
A link to the page where the table appears.
Whether you’re using a page builder.
I’ll be happy to provide more targeted help!
Best regards.

[adrian.wilde@choiceshomes.co.uk]

Hi,

I have added the following CSS to the advised area and it made no difference, please see the below video of issue persisting. I am using the quizz that came with tutorlms and the theme doesnt look like theres any specific plugin that I can see:

https://www.loom.com/share/dc7afd8706a74a199ace13627fb8947b?sid=dc38fdc1-70d1-4b70-b38f-230d8c69e948

Please advise.

Thanks

[serkan]

Hi,
I will forward this topic to our developer and i will keep you updated.
Btw, could you please provide me your wp admin details via our private content box below?
Thanks

[adrian.wilde@choiceshomes.co.uk]

i have managed to create some code myself which looks like its solved the problem for now:

/* === Make Date & Time stack nicely === */
.tutor-table-quiz-attempts td[data-title=”Date”] {
white-space: normal !important;
word-break: break-word;
font-size: 14px;
line-height: 1.3;
}

.tutor-table-quiz-attempts td[data-title=”Date”] {
display: flex;
flex-direction: column;
}

/* Optional: Add spacing between date and time if needed */
.tutor-table-quiz-attempts td[data-title=”Date”] br {
margin-bottom: 2px;
}

/* === Reduce header font size for cleaner look === */
.tutor-table-quiz-attempts th {
font-size: 13px !important;
padding: 8px 10px !important;
white-space: nowrap;
}

/* Tweak table cell font for consistency */
.tutor-table-quiz-attempts td {
font-size: 14px;
padding: 8px 10px;
}

/* Ensure buttons fit without cutting off */
.tutor-table-quiz-attempts td:last-child {
min-width: 100px;
}

[serkan]

Hi, Thank you for sharing your custom CSS solution—we’re glad to hear you’ve managed to resolve the styling issue with the quiz table! Your approach with the flex-direction and white-space adjustments is clever and effectively addresses the problem.

For future reference, we’ve noted your solution and can confirm it’s a clean way to:
Improve date/time readability with stacked formatting.
Optimize font sizes and padding for consistency.
Ensure button visibility in the table.

If you encounter any further issues or need refinements, don’t hesitate to reach out. We’re happy to help!
Thanks again for your patience and resourcefulness.