Last week we rolled out some major improvements to the MyStyle Custom Product Designer WordPress Pluin in ways that help the app the page of more WordPress themes without needing to edit or override your theme.

WP Theme Margins and Paddings and Viewports 

Previously, many themes margins and paddings and own approaches to handling the page responsively for all device sizes was having some issues with our iframe.  This meant that on some phones, especially smaller and older ones, the page would not “collapse” down elegantly to allow for the app to fit, and would not adjust viewport correctly to accommodate a PWA like the MyStyle HTML5 Customizer.

Major Responsive Updates in 3.2.X+

We’re happy to say that now, if you update your plugin to version 3.2.0 or higher, you will get a new option in your settings that should be ON by default, to override your theme’s viewport tag, and fit the page to the device better to accommodate the customizer app’s iframe on page. This allows the page to fit to the app more naturally in both portrait (upright) and landscape (sideways) hand-held orientations.  As always, just press “update” in your plugin list for the MyStyle plugin and it will self-update.  Then, visit your settings to ensure the setting for overriding viewport is enabled, which it should be by default.

Improved Portrait Mode

In portrait mode, you’ll notice the app buttons dock to the bottom of the window, much like popular apps do, such as Instagram, making it very familiar to the user and also much more in-reach of the thumb.

UI Zoom Fix for Retina Displays and HD Displays

This now works especially well for some devices when using Full Screen Mode, as we’ve corrected a zoom-level issue for both regular and retina displays that will compensate accordingly to make finger sized buttons where before tiny buttons would sometimes show on high-resolution devices.

Full Screen Mode

There is also a full screen mode button now on the page beneath the app window, that will snap the app to the top, left, right, and bottom edges of the screen automatically, for an even better experience. In this mode, the full-screen can be canceled by pressing the “x” that appears in the top right corner, as with most software.

Just WORKS Out of the Box!  Yes, That Means No More CSS Hackery.

This should help many WordPress / WooCommerce plugin users to integrate with their theme without having to do any custom CSS coding or adjustments, and make it much easier for a user to use the app on handheld devices without the theme causing it to go off-page, or not fit the screen well in general. All-in-all this should have a positive effect on sales ratios for any site that has a majority of users on mobile devices, which has by 2018, really become the norm.

If your particular theme still has any responsive issues, please let us know ASAP so we can push an update to accommodate your theme’s non-standard layouts or viewport scripts.

Happy Customizing!