Title: OXP Mobile First Toolkit Author: oxymaster Published: September 27, 2026 Last modified: September 27, 2026 --- Search plugins ![](https://ps.w.org/oxp-mobile-first-toolkit/assets/icon.svg?rev=3715116) # OXP Mobile First Toolkit By [oxymaster](https://profiles.wordpress.org/oxymaster/) [Download](https://downloads.wordpress.org/plugin/oxp-mobile-first-toolkit.1.0.0.zip) * [Details](https://wordpress.org/plugins/oxp-mobile-first-toolkit/#description) * [Reviews](https://wordpress.org/plugins/oxp-mobile-first-toolkit/#reviews) * [Development](https://wordpress.org/plugins/oxp-mobile-first-toolkit/#developers) [Support](https://wordpress.org/support/plugin/oxp-mobile-first-toolkit/) ## Description Your theme is responsive. Your site still has problems on a phone that no responsive grid solves: fixed backgrounds render as a stretched mess, every hover effect you designed is dead because there is no cursor, one stray element makes the page scroll sideways and you cannot find which, full-height sections overflow the screen and jump when the browser bar collapses, Safari zooms in when someone taps a form field, and a decorative background video quietly spends several megabytes of a visitor’s data plan. Four more modules add what a phone screen has no room for: a sticky bar that keeps your main buttons within thumb reach, a back-to-top button, a soft fade at the top and bottom of the screen instead of a hard cut, and a visible acknowledgement wherever a finger lands. OXP Mobile First Toolkit is one panel of switches for exactly those. It is not a caching plugin, not a mobile theme, and it does not touch your desktop layout. Every module arrives switched off. Activating the plugin changes nothing about your site until you turn something on, and one button puts everything back the way it came. **Nothing is loaded on a desktop.** Not the scripts, not the stylesheets. Whether a visitor is on a touch device is a question only the browser can answer, and a page cache would freeze any answer PHP tried to give, so the decision is made in the browser. A desktop visitor gets a few hundred bytes of inline script that stops on its third line and requests nothing. The single exception is the horizontal-overflow report, which is a tool for you rather than a fix for your visitor: it also runs on a desktop, because narrowing a browser window is how anyone actually hunts that bug. Its files are only ever loaded for a logged-in administrator, so a visitor still gets nothing. **You pick the vocabulary.** One bar at the top of the settings page decides how the whole screen talks: plain, where everything is described by what it does and there is no jargon anywhere; technical, where things are called by their real names and nothing is explained; or hybrid, the plain wording with the technical term in brackets, which is the one to leave on if you would rather pick the words up as you go. It changes the words and nothing else. Your settings do not move and your site does not change. Every module carries a live preview. Click the eye on a module and a simulated phone appears beside the form, with a switch between “without” and “with”, and it follows your own settings as you change them: move the dead-zone sliders and the bands in the phone move, pick a colour for the sticky bar and the bar changes, choose a tap effect and tapping inside the phone plays it. ### Features * **Fixed backgrounds.** Repairs `background-attachment: fixed`, which iOS paints against the element instead of the viewport, turning a tall section into a zoomed- in blur. The image really stays put while the page moves past it, which is what the CSS meant in the first place. * **Hover on scroll.** Activates your hover effects as elements pass through the middle of the screen. Your existing CSS is reused as it is: the plugin finds your `:hover` rules, mirrors them, and works out which elements they belong to, so it does something useful with nothing configured at all. Name your own selector to narrow it down, and choose whether an element stays lit once it has been seen. * **Sideways scrolling (horizontal overflow).** Finds the element that makes your page scroll sideways and names it, in a panel only you can see. Reports the deepest offender rather than the twelve ancestors it drags out with it, ignores anything a container already clips, highlights the culprit on the page when you tap its name, and lets you dismiss the ones you have already dealt with. * **Full-height sections (100vh).** Rewrites `100vh` heights to a unit that measures the screen the visitor can actually see, so a hero neither overflows nor jumps when the browser bar appears. * **Zoom when tapping a field (iOS input zoom).** Stops Safari zooming the page in when a visitor taps a form field, without taking pinch-zoom away from them. * **Background videos.** Leaves the poster image in place instead of streaming a decorative loop over mobile data. It shows the `poster` your video already has; it cannot invent one, so a video without a poster is left showing nothing. * **Vertical fade.** Fades the top and the bottom of the screen into a colour you choose, so a paragraph or a photograph runs out of view instead of being sliced in half by the edge of the phone. Either band on its own or both, in any colour, and no request at all: it is a few hundred bytes of CSS printed in the page. * **Always-on-screen buttons (sticky CTA bar).** A sticky bar carrying your main button, with its own label, icon, link, colour and style (filled, outlined or a gradient), that stays reachable however far the visitor has scrolled. Along the bottom of the screen or along the top. The icons are drawn by the plugin, so they cost no extra request, and the label colour is worked out from the button colour unless you would rather choose it. * **Back to top.** Appears once the visitor is far enough down to want it, in the corner and in the colour you pick, and you decide how far down that is. If the sticky bar is on, the button rests just above it rather than on top of it, which is the collision this pair of features otherwise makes on every site that has both. It is the one module you can also switch on for desktop, because a long page is long on a laptop too. * **Tap effects.** Draws a short animation exactly where a finger lands on a link or a button, because the finger is covering the thing it just pressed. A pulse or a ripple, in your colour, at your size, duration and opacity, on every tap or only on buttons and links, with an optional short vibration on Android. It stands down entirely for a visitor who has asked their phone for less motion. ### Privacy The plugin makes no external requests, from your server or from anyone’s browser, and stores nothing about your visitors. Everything it needs ships inside the plugin. ## FAQ ### Does this slow my site down? On a desktop it does nothing at all: no requests are made, apart from the overflow report for a logged-in administrator. On a phone it loads a small runtime plus only the modules you switched on, with no dependencies and no framework. Two of them, the iOS input zoom and the vertical fade, are a few lines of CSS printed straight into the page and load nothing at all. ### Will it change how my site looks on desktop? No. Every module that changes how a page renders is gated behind `(hover: none) and (pointer: coarse)`, in the script that decides what to load and again in the CSS. The overflow report is the one thing that also appears on a desktop, and only for a logged-in administrator: it draws a panel over your own page and changes nothing about the page itself. ### I already use OXP Mobile Fixed Background. Keep it. The toolkit detects it and stands down from that one module, so the two never fight. Deactivate it if you would rather manage fixed backgrounds from the toolkit instead. ### The hover module is activating far too many things. That is its default: with nothing configured it activates every element on the page that has a hover effect, because the alternative is a module that does nothing until you write a CSS selector. “Only these elements” is how you narrow it: give it a selector such as `.card, .tile` and the automatic detection switches off entirely, so only what you named is touched. ### The hover module does not activate one of my effects. Almost certainly the effect is defined in a stylesheet served from another domain, such as a CDN. Browsers refuse to let any script read the rules of a cross-origin stylesheet, so the plugin cannot find that rule to mirror it. Serving the stylesheet from your own domain fixes it. ### Does the overflow report show to my visitors? No. It is rendered only for logged-in users who can manage options. ### The overflow report used to list something and now it does not. It now ignores any element whose overflow a container already clips or scrolls, because that element cannot make the page drag sideways and listing it was listing a solved problem. If you dismissed it instead, the panel says how many are hidden and offers to show them again; dismissals are remembered per page, in your own browser. ### Does the vibration work on iPhone? No, and it cannot. No browser on iOS has ever implemented the Vibration API, Chrome and Firefox for iPhone included, since both are Safari underneath. It works on Android in Chrome, Firefox and Samsung Internet. That is why it is off by default and labelled. ### The settings screen uses a word I do not know. Then it is set to the wrong voice for you. At the top of the page there is a bar with three choices: plain, hybrid and technical. Plain never uses a technical term at all. It only changes the words on that screen, so switching between them is free and changes nothing about your site. ### I typed a description into “Only these elements” and nothing happened. That box wants a CSS selector, which is the name a designer gave the element and usually starts with a dot, like `.card`. A description of the element, however accurate, matches nothing. The plugin now says so when you save something that does not look like a selector. If you do not know the name, leave the box empty: the module finds the elements on its own, which is what it is designed to do. ### Can the sticky bar be kept off the checkout? Not at the moment: it shows on every page. It is worth checking either way, because a fixed bar sitting on top of a Place order button is the most expensive thing this module can do. If the bar is in the way on one page, leave the module switched off on that site until you are sure it is not. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “OXP Mobile First Toolkit” is open source software. The following people have contributed to this plugin. Contributors * [ oxymaster ](https://profiles.wordpress.org/oxymaster/) [Translate “OXP Mobile First Toolkit” into your language.](https://translate.wordpress.org/projects/wp-plugins/oxp-mobile-first-toolkit) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/oxp-mobile-first-toolkit/), check out the [SVN repository](https://plugins.svn.wordpress.org/oxp-mobile-first-toolkit/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/oxp-mobile-first-toolkit/) by [RSS](https://plugins.trac.wordpress.org/log/oxp-mobile-first-toolkit/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 First public release. * Ten modules, each one repairing something that only goes wrong on a phone, and every one of them switched off out of the box: activating the plugin changes nothing about your site until you say so. * Nothing is loaded on a desktop. A desktop visitor gets a few hundred bytes of inline script that stops on its third line and requests nothing at all. * A live preview beside every module, with a “without” and “with” comparison, drawn at an iPhone’s proportions and draggable like a real phone. * The screen can talk to you in plain words, in technical ones, or in both, and it can be shown in English or Spanish whatever language the site itself is in. * Fixed backgrounds repaired on iOS. * Hover effects triggered by scroll position, reusing the CSS you already have. * A report that names the element making your page scroll sideways and lights it up on the page. * Full-height sections that fit the screen a visitor can actually see. * Safari’s zoom on tapping a form field, stopped without taking pinch-zoom away. * Background videos held back on mobile data, showing their poster instead. * Soft fades at the top and bottom of the screen. * A sticky bar carrying your main button, along the bottom of the screen or the top. * A back-to-top button that rests above the sticky bar rather than on top of it. * Tap effects at your colour, size, opacity and duration. ## Meta * Version **1.0.0** * Last updated **2 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.7 or higher ** * Tested up to **7.1.2** * PHP version ** 7.4 or higher ** * Tags * [hover](https://wordpress.org/plugins/tags/hover/)[mobile](https://wordpress.org/plugins/tags/mobile/) [overflow](https://wordpress.org/plugins/tags/overflow/)[responsive](https://wordpress.org/plugins/tags/responsive/) [sticky](https://wordpress.org/plugins/tags/sticky/) * [Advanced View](https://wordpress.org/plugins/oxp-mobile-first-toolkit/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/oxp-mobile-first-toolkit/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/oxp-mobile-first-toolkit/reviews/) ## Contributors * [ oxymaster ](https://profiles.wordpress.org/oxymaster/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/oxp-mobile-first-toolkit/)