Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize Mathjax On Mobile

My Mathjax code looks fine on the computer but oversized on mobile: http://teach.sg/mathematics/additional-mathematics/trigonometric-functions/

enter image description here

Any way to resize this automatically for mobile?

Note: I am using safari on iPhone 6. Chrome gives me the same result.

like image 726
Eugene Avatar asked Apr 19 '15 09:04

Eugene


2 Answers

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 :

Scroll beginsScroll ends
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.

like image 183
candle Avatar answered Nov 17 '22 16:11

candle


In this answer I found a better solution to this problem:

.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: auto;
    overflow-y: hidden;
}
like image 22
Sr. Schneider Avatar answered Nov 17 '22 16:11

Sr. Schneider