CSS media query to force all Reveal.js fragments visible on mobile viewports, eliminating excessive scroll stops in Quarto presentations
Quarto Reveal.js presentations use .incremental lists and .fragment divs to reveal content one piece at a time during a talk. On desktop this works great — click/arrow to advance.
On mobile, Reveal.js switches to a scroll view where each fragment becomes a separate scroll stop. A slide with 5 incremental bullet points becomes 5 scroll stops instead of 1, making the presentation tedious to read on phones.
Add a single CSS media query to the custom SCSS theme:
@media (max-width: 768px) {
.reveal .slides section .fragment {
opacity: 1 !important;
visibility: visible !important;
}
}Reveal.js hides fragments via opacity: 0; visibility: hidden and reveals them by adding a .visible class. The media query fires on the real device viewport width (not Reveal's internal 1920×1080 coordinate system), so it correctly targets phones/small tablets while leaving desktop presentation mode untouched.
In Quarto's SCSS theme file (the one referenced in format.revealjs.theme), place it after the /*-- scss:rules --*/ section — outside any .reveal { } block so it compiles as a standalone media query.