Plugin Update:

We’ve corrected some issues view and mobile usability in the MyStyle Custom Product Designer plugin for WordPress/WooCommerce. This was an issue that some devices have had with the app not fitting the page well, sticking off the page to the right on small screens. We’ve also added a few more tweaks and tunes to make usability a little more natural for mobile. If you update to the most recent version of our core plugin (any version 3.9.0 or above), you will get the new updates that fix these issues for smart, responsive page auto-adjustments.

Viewport Zooming for Mobile Devices: Better Than Just “Responsive”

Responsive was always supported with the app, and the viewport zooming too to some extent, but it was limited and had some problems with some screen sizes.  In many cases, the theme often can leave the page unfitted for the app.   The viewport now automatically adjusts much better so that the design app can fit in portrait mode to the screen without any pinching or zooming.  Essentially, we’re doing the perfect pinch-zoom for the user, so that they don’t have to, and locking it in there.  We update this on page resize events so that if the user turns the phone or tablet sideways, it re-calibrates the zoom, in addition to switching modes from Portrait (buttons on bottom) vs Landscape (buttons on top/left).  This should help most sites automatically leave enough room for dragging on the handlebars on the sides as well.

Disabling Viewport Rewriting for the Customize Page

You can disable the viewport zooming in the MyStyle settings, if your theme or your custom code already takes care of this.  Just be sure to allow a minimum app width of 550px to allow for the application plus draggable side handle space.

Full Screen Button Moved Up to Top

Full screen, the app really works best. The full screen button, however, was beneath the app where it might go unnoticed. So, we’ve moved the button to the top of the page to make it quicker to see right away before getting down into the app on page by scrolling. This should encourage a lot more users to go full screen, where scrolling is eliminated entirely.

Scroll Handlebars

We’ve added some subtle handlebars to the left and right of the app for users to be able to scroll easier if they’re on a smaller size screen, since the main design area touch-and-drag will move the design elements rather than the page.

Adjustments for DIVI

DIVI is a popular theme for wordpress that uses an 80% page width.  We’ve overridden this now to allow the app to use more of page size by reducing their default margins and page size just on the Customizer page itself.