Title: Mobile Responsive Layout – An Ugly Solution?
Last modified: April 19, 2018

---

# Mobile Responsive Layout – An Ugly Solution?

 *  [Chris](https://wordpress.org/support/users/weazel91/)
 * (@weazel91)
 * [8 years ago](https://wordpress.org/support/topic/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;
       	}
       }
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [chippieuk](https://wordpress.org/support/users/chippieuk/)
 * (@chippieuk)
 * [8 years ago](https://wordpress.org/support/topic/mobile-responsive-layout-an-ugly-solution/#post-10236465)
 * Hi,
 * Really like what you have done with your site.
 * I’m especially interested in the cast member and sale details section of the 
   checkout. How have you achieved this, with the addition of a join mailing list
   option etc? Does that feed through automatically to join your mailing list, or
   is this a manual action after the sale?
 *  Thread Starter [Chris](https://wordpress.org/support/users/weazel91/)
 * (@weazel91)
 * [8 years ago](https://wordpress.org/support/topic/mobile-responsive-layout-an-ugly-solution/#post-10243399)
 * Hi Chippie,
 * First off, thanks!
 * It’s created using the define parameters in the stageshow-wp-config.php file 
   in uploads and some JS functions to pass back to the trolly on checkout. The 
   join mailing list is, at present manual, but may look at passing parameters back
   to some php if I get a chance.
 * I’d paste all the snippets of the code here but its quite lengthy. If you wish
   to discuss further drop me an email. [chris@shineboxoffice.co.uk](https://wordpress.org/support/topic/mobile-responsive-layout-an-ugly-solution/chris@shineboxoffice.co.uk?output_format=md)
 * Thanks,
    Chris

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Mobile Responsive Layout – An Ugly Solution?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/stageshow_3c5670.svg)
 * [StageShow](https://wordpress.org/plugins/stageshow/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/stageshow/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/stageshow/)
 * [Active Topics](https://wordpress.org/support/plugin/stageshow/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/stageshow/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/stageshow/reviews/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [responsive design](https://wordpress.org/support/topic-tag/responsive-design/)

 * 2 replies
 * 2 participants
 * Last reply from: [Chris](https://wordpress.org/support/users/weazel91/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/mobile-responsive-layout-an-ugly-solution/#post-10243399)
 * Status: not a support question