In Firefox (using Dona)

• 1211  /  from wide to narrow
• 976 / 976 is the firefox change over from desktop to mobile

Max-Width

The following code snippets will allow you to set the maximum width (max width, max-width) of your joomlashine template in various guises.

NB: You can also get this code from you joomlashine template by setting the template to a fixed width and look at the source code. Usually at the top you will see the code fixing the width. Just copy this and alter it as needed, i.e. set max-width only to stop templates going mental.

I also need to see which ones actually work and how specific to a particular template they are.

/* Reta - Max Width */
#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner,
	#jsn-menu.jsn-menu-sticky,
	#jsn-nav-inner {
		max-width: 960px;
}

/* Force max width - Untested */
#header-inner,
#jsn-header-inner,
#jsn-topheader-inner,
#jsn-promo-inner,
#jsn-content,
#jsn-footer-inner {
	max-width: 1000px;
}

/* Fixed width website */
NB: there is dynamic css in the html and this is where i have got this.
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
}

/* set max page width */
#jsn-pos-topbar,
#jsn-headerright-inner,
#jsn-header_inner2,
#jsn-content-top_inner,
#jsn-content,
#jsn-promo_inner,
#jsn-pos-content-top_inner,
#jsn-footer_inner,
#jsn-content-bottom_inner {
	max-width: 1024px;
}

Responsive Triggers

/* Prevent template going responsive for devices with screen size 1024px or above */ 
/* All devices with screen size 1024px and above will be forced to 1200px wide layout */
@media only screen and (min-device-width: 1024px) {
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
	}
}

/* Force Desktop Version for screens 1024 and above */

/*@media only screen and (min-width: 1024px), (min-device-width: 1024px) {*/
/*@media only screen and (min-device-width: 1024px) {*/

@media only screen and (min-width: 961px), (min-device-width: 1024px) {
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
	}
}