According to Ash Turner of BankMyCell.com (Turner, 2022), "the number of smartphone users in the world today is 6.648 Billion, which translates to 83.32% of the world’s population owning a smartphone. In total, the number of people that own a smart and feature phone is 7.26 Billion, making up 91.00% of the world’s population."

For my work on calculus, these numbers mean my broadest reach to the largest student audience will be through a smart phone, mobile device, or tablet. In short, rendering my work on a mobile device is not only a nice-to-have feature, but it is marketing requirement.

In my case, I am writing my HTML, Javascript, and CSS code as elements that sit on top of shareware frameworks, including ReactJS, NextJS, and SCSS. For code to be mobile-enabled, primarily involves the CSS code where instructions engage when certain media dimensions are hit.

In my CSS code blocks, I have instructions that look as follows.

A CSS code block written with an @media instruction will engage when a condition is met. In this case, the CSS code block above will engage when the width of the browser falls below 400 pixels.

In my HTML code blocks, I have CSS instructions as illustrated below.

To enable an application for mobile devices, a developer must painstakingly go through their entire code block to apply CSS instructions that trigger certain commands at prescribed widths.

As an example of how this works, see Justin Tomich's brief write-up on media queries and the Tachyons CSS Framework (Tomich, 2019) .