Mobile Responsive Layout – An Ugly Solution?

Hi all,

It’s not elegant nor is it pretty however here is something for you to play with if you are looking for a slightly neater solution to displaying stageshow on mobile devices, iPads etc.

Please note that all the .page-id-204’s need changed to .page-id-# (# being the wordpress page ID that your [sshow-boxoffice] shortcode is on – You will find this in the URL when you are editing a page). If you do not specify the page ID within CSS it will try and block table your seating plan too, and thats NOT pretty!

I hope the below helps some people out. Just pop it in your CSS with the changes above.

If you wish to see the below in action feel free to visit shineboxoffice.co.uk/box-office on a mobile or PC and resize your browser window.

/* 
Max width before this PARTICULAR table gets nasty
This will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#stageshow-selector-table table,
	#stageshow-selector-table thead,
	#stageshow-selector-table tbody,
	#stageshow-selector-table th,
	#stageshow-selector-table td,
	#stageshow-selector-table tr { 
		display: block; 
	}

	/* Nudge this button over slightly */
	.stageshow-selector-perfbutton {
		position:relative;
		left:10px
	}

	/* BLOCK all other td's */
	.stageshow-boxoffice-table td {
		display: block;
	}
 
	.stageshow-trolley-table table,
	.stageshow-trolley-table thead,
	.stageshow-trolley-table tbody,
	.stageshow-trolley-table th,
	.stageshow-trolley-table td,
	.stageshow-trolley-table tr {
		display:block;
	}

	
	/* Hide table headers (but not display: none;, for accessibility) */
	.page-id-204 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

.stageshow-trolley-notetoseller td {
	display: none;
}

.page-id-204 .stageshow-trolley-titles
{display:none;}

.page-id-204 .stageshow-boxoffice-header
{display:none;}

.page-id-204 .stageshow-boxoffice-datetime
{width:100%;}

.page-id-204 .stageshow-boxoffice-type
{width:100%;}

.page-id-204 .stageshow-trolley-donationrow-text
{display:none;}

.page-id-204 .stageshow-trolley-donation:before
{content: "Donation: ";
text-align:"center";}
	
	.page-id-204 tr { border: 1px solid #ccc; }
	
	.page-id-204 td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.page-id-204 td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}