pages/_sass
Ali Faraji fa93875e37
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.
2025-11-16 22:41:00 -03:00
..
font-awesome Update Font Awesome and Tabler Icons (#2884) 2024-12-11 15:19:38 -03:00
tabler-icons Update Font Awesome and Tabler Icons (#2884) 2024-12-11 15:19:38 -03:00
_base.scss Fix MathJax long-formula overflow on X-axis in mobile and small screens view. (#3302) 2025-11-16 22:41:00 -03:00
_cv.scss Revert padding from #2617 for CV tables (#2920) 2024-12-29 21:50:59 -03:00
_distill.scss Fix: Improve footnote and citation colors in Distill posts (#3172) 2025-05-23 06:42:09 -07:00
_layout.scss format code with prettier.io (#2048) 2024-01-10 00:10:51 -05:00
_tabs.scss Added support for jekyll-tabs (#2380) 2024-05-02 14:34:48 -03:00
_themes.scss Fix scrollbar color (#3058) 2025-03-11 11:42:08 -03:00
_typograms.scss Added support for Google Typograms (#2379) 2024-04-30 11:26:56 -03:00
_variables.scss Updated dependencies (#2715) 2024-09-24 15:57:59 -03:00