General

/* add padding to blog images */
.jsn-layout-blog .pull-left.item-image img  {
	padding: 20px;
}

/* fix squashed article contents */
.article-contents {
	display: inherit;
}

Header

/* Remove Header background image */
#header-inner{background: none;}

/* Disable the world image in header */
#header-inner {background-image: none;}

/* Remove logo white background */
#jsn-logo {background-color: transparent;}

/* Remove topbar padding and margins */ 
#jsn-topheader-inner {padding-top: 0;}

/* reduce gap between logo and menu */
#jsn-topheader {margin-bottom: 0;}

Menu

/* create a 100% wide menu background */
#jsn-body{
	border-top: 51px solid #222222;
	margin-top: -51px;
}

If you you need to make the menu taller just increase both 51px.

/* remove line/border below menu  */
#jsn-body {
    border-top: none;
}

/* Make Main Menu Grey */
#jsn-menu {
    background-color: #EFEFEF;  /*#EFEFEF  this is very common*/
    box-shadow: none;
}

Bug Fixes

/*  Bug Fix - Content goes of the side - I think that is what this fixes  */
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
	#header-inner{
	width: inherit !important;
	margin: 0 auto;
	}
}

module responsive suffix do not work

Please check the file template_pro.css at line 30:

#jsn-page
	transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out;
}

The code is missing a "{" after #jsn-page that makes the code incorrect, so all the css after this point is not parsed.

The correct code:

#jsn-page {
	transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out;
}

Then all the class suffix will work fine.

Right hand side is cut off - responsive failed (not all verified as there seems to be 2 soluitions)

The issue has been fixed by changing some css 'css/layouts/jsn_mobile.css' at line 20:

#jsn-pos-topbar,
#jsn-topheader-inner,
#header-inner,
#jsn-header-inner,
#jsn-pos-promo-full,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-below,
#jsn-content,
#jsn-content-bottom-inner,
#jsn-usermodules3-inner,
#jsn-content-bottom-mid-inner,
#jsn-content-bottom-below-inner,
#jsn-footer-inner {
	width: 100%; /* change from width: 1170px; */
	min-width: inherit;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

'css/layouts/jsn_mobile.css' at line 783:

#jsn-pos-promo {
	margin: 0;   /* change from margin: 0 20px; */
}

the issue is not fixed. The template changer, the right column and and main content area get cut off. Just like before

In templates/jsn_time_pro/css/layouts/jsn_mobile.css line 34

width: 1170px changed to width: 100%;

In 'templates/jsn_time_pro/css/template.css' line 239, add this code:

@media only screen and (max-width: 1199px), (max-device-width: 1199px) {
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#header-inner,
	#jsn-pos-promo-full,
	#jsn-promo-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-below,
	#jsn-content,
	#jsn-content-bottom-inner,
	#jsn-usermodules3-inner,
	#jsn-content-bottom-mid-inner,
	#jsn-content-bottom-below-inner,
	#jsn-footer-inner {
		width: 100%;
	}
}

cannot change font size in template config

remove the following from the tempalte.css

.article-contents{
	font-size: 14px;
}