Resize Mathjax On Mobile
In this answer I found a better solution to this problem:
.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
overflow-x: auto;
overflow-y: hidden;
}
I hope this simple solution will fit to you:
Just add overflow-x: scroll;
to div's style that containing MathJax equation. It will make your MathJax equation scroll-able, and prevent going equation out of range.
In your example it is a div with
id="std-body-box-2864" style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff;"
.
Add overflow-x: scroll;
at the end of style tag :style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff; overflow-x: scroll;"
.
It will add a scroll at the bottom of the div. MathJax equation will stay in the "Special Angles" box.
Raw preview :
Actually there can be many solutions(including smart ones using jQuery), you can find appropriate one by googling "responsive tables in html". MathJax is using <span>
, it's not actually the tables, but I hope that will help.