Calendar pop-up doesn't look right on mobile

Is your calendar looking weird when viewed on mobile? Supertime has a fix for that!

Unfortunately there are a few Shopify themes (e.g. Simple) that override the way tables are styled on mobile. This is likely the cause of your calendar display issues on mobile devices. To fix this, you will need to modify your store's CSS in your Theme settings.

Steps:

  1. Visit your store's Theme settings.
  2. Click the Actions button and select Edit Code.

  3. Find your theme.scss.css file. This is typically found under the Assets folder.
  4. Search for "table styles" to find the table styling CSS
  5. Locate the following code in the table styles CSS
    @include media-query($small) {      
    width: 100%;
    	
  6. Replace it with the following code which just comments out the 100% width.
    @include media-query($small) {      
    /*! width:100% */
    	
  7. Click the Save button.