Fix MathJax long-formula overflow on X-axis in mobile and small screens view. (#3302)
This PR fixes an issue where long MathJax formulas in blog posts
overflowed horizontally and broke the layout.
* Added a small CSS rule to make MathJax formulas horizontally
scrollable instead of overflowing.
* Now, when a formula is wider than the container, users can scroll
horizontally without the page layout getting messed up.
**SCSS changes:**
```scss
mjx-container[jax="CHTML"][display="true"] {
overflow-x: auto;
}
```
**Testing:**
Verified that:
* Long formulas no longer push the layout wider than the viewport.
* Short formulas render as before.
Before:
https://github.com/user-attachments/assets/521b4967-cc1e-4e8b-b2fc-2c59314a8dee
After code fix:
https://github.com/user-attachments/assets/698811ff-d418-43eb-9261-5073105a3d9f
Live demo at: [PI Day -- bellards
formula](https://blog.faraji.info/math/Pi-day.html#bellards-formula-for-pi);
open with responsive design mode or with a mobile device.
This commit is contained in:
parent
33017e7952
commit
fa93875e37
@ -1489,3 +1489,7 @@ figure.cover {
|
||||
color: #23212d !important;
|
||||
}
|
||||
}
|
||||
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user