I am spending quite a bit of time making the new blog responsive. My goal is to make the mobile site fully functional and to make it look as nice as the application on the web. I ran into some major hurdles. For example, the original code formatter, developed by Jason Delmore, expanded beyond the mobile device size. I re-wrote quite a bit of the logic in the formatter, but I did not want to re-write the core logic that provides the formatted code and lines. I had wanted to re-write every inner div and span that used position: absolute underneath the constraining parent div that had position, relative, but gave up as there were so many div's and spans. There is so much logic in the formatter that I gave up thinking about making the code responsive and instead I constrained the content like so: CSS:

/* The constrainer table will constrain one or many different div's and spans to a certain size. It is handy to use when you are trying to contain the size of elements created by an older libary that does not use responsive design. */
#constrainerTable {
	/* The parent element (this table) should be positioned relatively. */
	position: relative;
	/* Use the root width var */
	width: var(--contentWidth);
	/* Now that the parent element has a width setting, make sure that the width does not ever exceed this */
	max-width: 100%;
}	
		
/* Helper function to the constrainerTable to break the text when it exceeds the table dimensions */
#constrainerTable .constrainContent {
	max-width: 100%
}
th {
	max-width: var(--contentWidth);
}
td {
	word-break: break-word;
	min-width: 50px;
}

And the HTML:

<!-- Post content --> 
<!--- Note: Delmore's code formatter is not mobile friendly and it does not use responsive design. This table will constrain the content to a certain variable size. --->
<table id="constrainerTable" class="constrainContent">
	<tr>
		<td>
			<!--- Blog post. --->
			#application.blog.renderEntry(body,false,enclosure)#				
		</td>
	</tr>
</table>

Fixed background image settings for mobile devices: To use a fixed background, the main arguments here are display: block, position: fixed, z-index:-10

body:before {
	content: "";
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background: url(<cfoutput>#blogBackgroundImage#</cfoutput>) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Opacity settings for mobile devices: The web application has a nice opacity effect where the theme's background image bleeds through into the interface. To accomplish the same effect for iOs devices, I used: opacity: .92 and visibility: true.

/* Opacity for iOs */
opacity: 0.<cfoutput>#siteOpacity#</cfoutput>;
visibility: visible;