Display Appointments Calendar On Mobile in Portrait Mode

The "Free", "Busy" and "Not Possible" labels and Images exceed the right hand margin when viewed on Mobile Phone in portrait mode (I use Samsung Galaxy S4).
The attached images are both screen shots from a desktop view, in both cases the labels view ok but are extending past the calendar right hand side.

Image "original Layout" shows this, the "Not Possible" label exceeds the right hand side of the Calendar.
Image "Label Shorter" has Label "Not Possible" changed to "Locked" this looks better on the desktop but you can see the label and image line is not centered to the calendar.

Then if we view on mobile phone in Portrait Mode http://mobilephonerepairs.nz/product/replace-battery-iphone-5c/
the label line exceeds the right hand margin - this is my problem, can this be corrected or can you advise what I can alter to rectify this.
One solution could be words on top or bottom of image plus, overall centering of the overall line display.

  • Colin

    More Info
    I use the Appointments shortcode in WooCommerce product pages.
    Example
    [app_monthly_schedule worker="3" service="339"][app_pagination month="1" step="1"][app_confirmation title="Check your details" button_text="Click Here to Complete"]

    The following code is in the child functions.php to remove the Product image this is normally on the left hand side of the Product Page.

    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

    Then CSS code to move the calendar etc to the left hand side of the product page, floats right from the left hand side of the sidebar which is on the right. Width set to Auto.

    .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary {
    	float: right;
    	width: auto;
    	margin-bottom: 2em;
    }

    float: right; has currently been removed as the Label Line exceeding the Right hand side pushes the contents out the left side of the display.

  • Rupok

    Hi Colin, hope you had a wonderful day.

    The "Free", "Busy" and "Not Possible" labels and Images exceed the right hand margin when viewed on Mobile Phone in portrait mode

    It can be fixed with following custom CSS Code:

    @media screen and (max-width: 480px) {
    table.appointments-legend-table td {
      min-width: 20px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .single_add_to_cart_button {
      font-size: 11px !important;
    }
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.