Chemical reaction going over display limits on phones

  • Resolved baitaphoa

    (@baitaphoa)


    3 months, 1 week ago

    Hi,

    My site is a chemistry practice site, and it contains a lot of chemical reactions which is too long to be displayed perfectly on phones. I need help with fixing this problem, without adjusting the original reactions.

    Any supports will be appreciated. Thanks in advance!

    https://streamable.com/mi71y6

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jasmine

    (@hyenokian)

    Dear @baitaphoa,

    Thank you for your topic.

    We noticed that you are using MathJax.
    We checked and found that they’ve provided custom CSS to prevent text wrapping.
    See the screenshot below:

    View post on imgur.com

    When removing this, the issue disappears.
    See the screenshot below:

    View post on imgur.com

    It would be ideal to contact their support and check what solution they offer for mobile devices as the case doesn’t have any connection to our plugin.

    However, as a workaround, our development team has provided the following CSS code, which you can add to the Custom CSS section (Quizzes > particular quiz > Styles Tab) to see if it resolves the issue:

    @media screen and (max-width: 768px){
    #ays-quiz-container-YOUR_QUIZ_ID mjx-math {
    white-space: normal;
    text-align: center;
    }
    }

    Please, make sure to replace YOUR_QUIZ_ID with the actual ID of your quiz.

    Again, this is an alternative solution, so we recommend reaching out to their support to see what they suggest.

    Let us know if you have more questions.

    Thank you.

    Thread Starter baitaphoa

    (@baitaphoa)

    Thank you for the support! The Custom CSS worked perfectly! As for a real solution, I will try to contact MathJax later!

    Plugin Support Jasmine

    (@hyenokian)

    Dear @baitaphoa,

    Thank you for your reply.

    Glad to hear that everything works fine for you now.
    If your query is resolved, please take a moment to rate and review the plugin or support.

    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.