How to have long equations scrollable on smaller screens?

[dense-set]

Description

I am coming across instances where I need to write long equations on my webpage. This works fine for big screens, but is gnarly for smaller ones. For instance, see the following screenshots of a blogpost that I recently authored:

I am aware that MathJax provides a way to control the spillages on small screens by making them "scrollable", as is done on MathSE like so:

Screen.Recording.2024-04-02.at.12.51.14.AM.mov

Question: How to enable this on Quarto webpages? I tried adding the following to CSS (as suggested in here) but to no avail.

.math.display {
    overflow-x: auto;
    overflow-y: hidden;
}

[mcanouil]

I understand you're looking for assistance with HTML/CSS, particularly regarding screen width rules. While this topic falls outside the scope of Quarto support, I'd be happy to guide you towards resources that can help.

Learning about CSS and its application in controlling layout for different screen sizes can be quite useful. A great place to start is online tutorials that focus on CSS. For instance, you might find the CSS reference on media queries quite useful for understanding responsive design principles (https://www.w3schools.com/cssref/css3_pr_mediaquery.php). Additionally, the developer tools in web browsers can be incredibly insightful for experimenting with and debugging your CSS code.

I hope this helps

Related topics:

• How to split a long equation and make them show in two lines #5550
• Automatic column width for latex equations in html page #2170

[dense-set]

Thanks for such a friendly response! Having so many tools, each doing so many things, I often guess wrongly their associations. But with you guys here so patiently listening to me and always generous with your tips, I do find solutions evetually. This is one of those instances.

I realized that the math that MathJax injects is in <span> rather than <div>, and my original solution thus failed, for overflow-x can be specified only for block level elements. It turns out that what I must have been targeting is mth-container[display="ture"]. And that worked as a charm!

[phineas-pta]

there's a typo in answer if anyone wondering: it should be mjx-container[display="true"]