Loading

CSS Advice Needed

I’m trying to make our webpages more friendly to users of small-screened smartphones. Ahmed Shadeed’s article “Enhancing the Clickable Area Size” provides a solution for fat-fingered, frustrated users by adding pseudo-elements to the CSS.

I’m trying to marry that to the endnote technique described in Kitty Giraudel’s article, “Accesible Footnotes with CSS.”

I’m trying to use Shaheed’s method of increasing the touchable area size to two places on the webpage — the footnote number anchor and to the backlink anchor — but only if viewed on a small screen.

I have a small test file you can experiment with. Your assistance would be much appreciated. Thanks.