Fitting the width of web page that has long formula to display size

The width of my WordPress blog doesn’t fit mobile display. What is the cause? How can I fix this?

The room at the right side of the page


To adjust the width of pages in my WordPress blog for mobile phone.


WordPress 5.5.1
Theme: Sparkling
Plugin: MathJax-LaTeX


The page size is expanded by mathematical formula. (For example, an article “What is Hermite interpolation?” has long formula)

How I found it…

In my case, though the width of main html is fit to the display the width of the whole page is expanded for some reasons. And it doesn’t occur when single article is opened (you can see the size of background is fit to the display as below).

I found that the change of the width happens with a time lag after main header and footer are loaded. I captured display and find that the change happened just after “Typesetting math” process completed.

This process is creation of the formula with the greatly useful plugin “MathJax-LaTeX“. When “MathJax-LaTeX” plugin is deactivated, the size of the page fit to the display.


The following is html source related to MathJax.

  <span class="MathJax_Preview" style=""></span>
  <div class="MathJax_Display" style="text-align: center;">
    <span class="MathJax" id="MathJax-Element-6-Frame" tabindex="0" style="text-align: center;">
       ------ omitted ------

Workaround currently is to add the css below to the “Additional CSS.”

	height: 55px;
	overflow-x: auto;

This enables formula with MathJax-LaTeX to fit the width of page and be scrolled with scroll bar.