meridahosting

Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Forum: Plugins
    In reply to: [Masteriyo LMS – LMS Course Builder, Quizzes & Certificates] Responsive issue on Quiz Attempt details on mobile
    meridahosting

    (@meridahosting)

    1 day, 22 hours ago

    Hi Saurav (@sauravkhanal) and the Masteriyo Team,

    I wanted to send a quick follow-up to express my sincere gratitude for your outstanding, detailed, and thorough support throughout this thread. Your technical insight and prompt responses have been truly impressive.

    We are loving the plugin so much that we have recently upgraded and acquired Masteriyo Pro for our project! 🚀

    I’ve already applied the safer CSS snippet as suggested, and everything is rendering smoothly. We’ll be looking forward to the official fix in the upcoming releases.

    Please consider this ticket resolved for now, but we will remain at your disposal and in touch if any new questions or minor details come up along the way.

    Thanks again to you and the entire dev team for maintaining such an awesome plugin and providing top-notch support!

    Best regards,

    Elías / Merida Hosting Team

    Instituto Educardio

    Forum: Plugins
    In reply to: [Masteriyo LMS – LMS Course Builder, Quizzes & Certificates] Responsive issue on Quiz Attempt details on mobile
    meridahosting

    (@meridahosting)

    5 days, 6 hours ago

    Hi team,

    Thanks for the detailed explanation and for passing this along to the dev team!

    Good point regarding the scope of the CSS rules. I’ll switch to the safer snippet you provided to prevent any layout side-effects on mobile, and I’ll keep an eye out for the permanent fix in the upcoming release.

    Thanks again for the great support!

    Forum: Plugins
    In reply to: [Masteriyo LMS – LMS Course Builder, Quizzes & Certificates] Responsive issue on Quiz Attempt details on mobile
    meridahosting

    (@meridahosting)

    5 days, 23 hours ago

    Feedback on CSS Workaround / Custom Solution

    Hi Saurav (@sauravkhanal),

    Thank you for the detailed analysis and for logging this fix for an upcoming release!

    In addition to your snippet, we tested a custom CSS block targeting the dynamic Chakra UI containers directly within #masteriyo-account-page. This approach forces the Flexbox layout into a vertical column (flex-direction: column) on screens smaller than 768px, ensuring that all labels, question descriptions, and answer rows stack vertically with full width:

    /* Custom workaround for Masteriyo Quiz Attempt details on mobile / @media only screen and (max-width: 767px) { / Force Chakra Flex containers to stack vertically / #masteriyo-account-page [class=”css-“],
    body.masteriyo-account-page [class*=”css-“] {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    }

    /* Expand cell blocks to full width */
#masteriyo-account-page [class*="css-"] > div,
body.masteriyo-account-page [class*="css-"] > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent awkward letter-by-letter text wrapping */
body.masteriyo-account-page * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

    This layout worked very cleanly for us by placing every label right above its corresponding response across all question attempt sections on mobile.

    Feel free to pass this along to the dev team in case it helps inform the upcoming native responsive refactor for the Chakra UI modal/page components!

    Thanks again for your awesome support.

    Best regards,

    Forum: Plugins
    In reply to: [Masteriyo LMS – LMS Course Builder, Quizzes & Certificates] Responsive issue on Quiz Attempt details on mobile
    meridahosting

    (@meridahosting)

    1 week ago

    Hi Saurav (@sauravkhanal),

    Thank you for the detailed response and analysis! Here are the answers regarding my current setup:

    1. Your setup:
    • Account Page Layout is set to “Show Header and Footer”.
    • The /account/ page was created automatically by Masteriyo, but we are viewing/editing it through Divi.
    • Regarding the Divi sidebar: You were completely right. The page had Divi’s default right sidebar enabled (reserving ~225px empty space). I have updated the page settings in Divi to “No Sidebar” / “Fullwidth”.
    • We are not using Divi’s Theme Builder for any custom template on this specific page.
    1. History:
    • This issue with the quiz attempt table squeezing has been present since we published the first quiz with longer questions/answers.
    1. CSS:
    • I removed the custom CSS block temporarily while testing different layouts. There is no other active custom CSS targeting Masteriyo in Code Snippets or Theme Options at the moment.
    1. Environment:
    • We are using LiteSpeed Cache (along with server-level caching).
    • The squeezing happens heavily on mobile devices (portrait screens ~375px-414px width), but also on desktop when the screen is resized or when table content is long.

    Now that I have removed the Divi sidebar, the desktop layout gained more width. However, on mobile screens, the table cells still compress vertically.

    Could you provide a CSS snippet (e.g., adding overflow-x: auto; or transforming table rows into block elements for mobile views) to make the Quiz Attempt details table scroll horizontally or stack cleanly on mobile?

    Thanks again for your support!

Viewing 4 replies - 1 through 4 (of 4 total)