How do you debug mobile?

[RyanReese]

I don’t know whether cache is taking effect on my website (www.codefundamentals.com) but on Samsung Galaxy S3, it’s difficult getting CSS rules to work. I’m having an issue on my Internet app for Galaxy S3 (the default one that comes)…the main content text doesn’t stretch the full width of #main (main has the gray background so I know it has to be #mainContent which just isn’t stretching).

Dev tools like Chrome Inspector and Firebug have been useful in desktop sites. If anyone knows how to fix the text / how to debug for mobile, let me know please. I’ve cleared cache but it’s a no go for updates. I’ve done rules like

#mainContent *{display:none!important;}

On desktop it removes everything. Nothing on the Internet app (chrome for mobile, yes). So when most rules do not work, it’s difficult to debug.

If anyone knows the fix for it, please let me know.

Don’t judge my code too bad - the site just went live and I still have the task of converting my images to sprites and doing CSS cleanup on unneeded rules etc.

[ralphm]

On things like Chrome you can narrow down your browser and place the inspector to the right to get an idea of you small screen display. Chrome will also soon include emulators for various devices (perhaps already does in Canary), but not sure how useful it will be.

You can plug an iPhone into your desktop and inspect the elements via the Safari inspector, which is really nice. I’m pretty sure I’ve read you can do the same with Android devices in Chrome, but I’ve never tested it because I don’t have such a device.

[PaulOB]

Hi Ryan,

The first thing you have missing is the viewport meta tag and without it your media queries will be ineffective because they will assume a 980px width.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next I would advise against linking to a separate mobile css and indeed some older devices don’t like the media query in the link tag but instead use media queries in the main stylesheet following the rules to which they apply.

Lastly, don’t design for device widths ((max-device-width: 480px)) as who knows what devices that really means? What you are really interested in is screen width. Most importantly “Don’t chase devices”! There are just too many of them to code for on a case by case basis. All you need do is create a fluid/elastic site on your desktop and open your window slowly from large to small and when you get a horizontal scrollbar or when something doesn’t look right throw in a media query and fix it. Don’t go overboard but a few well placed media queries will make most sites scale nicely for all devices without needing to know anything about device size.

[RyanReese]

[/QUOTE][QUOTE=Paul O’B;5699790]Hi Ryan,

The first thing you have missing is the viewport meta tag and without it your media queries will be ineffective because they will assume a 980px width.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next I would advise against linking to a separate mobile css and indeed some older devices don’t like the media query in the link tag but instead use media queries in the main stylesheet following the rules to which they apply.

I actually did have that meta on there but I saw no difference when I applied that as to when I didn’t, so I didn’t b other keeping it in. I put it back in though for kicks.

Lastly, don’t design for device widths ((max-device-width: 480px)) as who knows what devices that really means? What you are really interested in is screen width. Most importantly “Don’t chase devices”! There are just too many of them to code for on a case by case basis. All you need do is create a fluid/elastic site on your desktop and open your window slowly from large to small and when you get a horizontal scrollbar or when something doesn’t look right throw in a media query and fix it. Don’t go overboard but a few well placed media queries will make most sites scale nicely for all devices without needing to know anything about device size.

Thanks - my whole site is good for multiple sizes. The main content area especially is put up against the floated sidebar with the left margin = to the sidebar width so it SHOULD take up the full remaining width but it doesn’t :(.

[PaulOB]

@RyanReese

I actually did have that meta on there but I saw no difference when I applied that as to when I didn’t, so I didn’t b other keeping it in. I put it back in though for kicks.

You obviously don’t understand the importance of this so I will say it once again:)

If you are using media queries for mobile devices then you “must have the meta viewport tag as I have shown above”. Without this tag the media queries will not recognise the widths correctly and will assume the device is 980px and then shrink to fit and possibly resulting in fluid elements not stretching across the available width.

You must have the meta tag. If you don;t have the meta tag then don’t use any media queries for mobile at all.

Either you take control or you don’t.

Thanks - my whole site is good for multiple sizes

Only on the desktop because for mobile you haven’t used the meta tag and media queries effectively. At less than 780px you get a scrollbar on desktop also.

The main content area especially is put up against the floated sidebar with the left margin = to the sidebar width so it SHOULD take up the full remaining width but it doesn’t :(.

If you are talking about mobile then that’s exactly because of the problems I mention.

If for example you create a page with text only and don’t use the meta tag you will get a page of text that is assumed to be 980px and then the mobile scales it to fit in the 320px screen. You do not get text that wraps at 320px unless you use the meta tag and then the page isn’t scaled and the text will wrap at normal size and at the boundaries of the device.

The meta tag and media go hand in hand and one is useless without the other as far as mobile is concerned.

[RyanReese]

That 780 scrollbar was on purpose.

I didn’t have the meta tag in and yet I’m able to make changes to my mobile version of my website. If I need the meta tag then why is this? Is it because I’m still using the <link> to target mobile?

[PaulOB]

@RyanReese

That 780 scrollbar was on purpose.

Yes but is bad We don’t do things like that these days

I didn’t have the meta tag in and yet I’m able to make changes to my mobile version of my website. If I need the meta tag then why is this? Is it because I’m still using the <link> to target mobile?

You are targetting device-width in your media query. It’s not the same as screen width. You want screen width. When you use device-width then you need to cater for all devices with specific media query widths as I mentioned before and that just doesn’t work. Target the screen width and you collect all devices automatically.

Your media queries will target the device assuming your device is the width you specifed but t will not react to media queries based on the screen width which is what you actually want. Without the meta tag your device-width wil be applied to that device but the device will assume a screen width of 980px - which is the root of your problems.

Use media queries like this in the original stylesheet:

#container{
width:70%;
max-width:1280px;
}
@media screen and (max-width: 1100px) {
 #container {
	width:85%;
	max-width:none;
 }
}
@media screen and (max-width: 800px) {
 #container {
	width:99%;
 }
}

Here is a quick revision of your site using that approach (this is very rough as I am supposed to be working at the moment :))

<!DOCTYPE html>
<html lang="en">
<head>
<title>CodeFundamentals - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!--<link href="/scripts/resets.css" type="text/css" rel="stylesheet" />-->
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, em, img, q, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, form, label, legend, fieldset, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-family: Tunga, "Trebuchet MS", Miriam, "Levenim MT", sans-serif;
	font-weight:500;
	vertical-align: baseline;
}
article, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \\*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* close commented backslash hack */
</style>
<!--<link href="/scripts/styles.css" type="text/css" rel="stylesheet" />-->
<style>
#lightbox {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.7);
	text-align:center;
}
#lightbox img {
	box-shadow:0 0 25px #111;
	-webkit-box-shadow:0 0 25px #111;
	-moz-box-shadow:0 0 25px #111;
	max-width:940px;
	max-height:90%;
}
#lightbox p {
	color:#FFFFFF;
	font-size:1em;
	cursor:pointer;
}
/* FOR GOOGLE SEARCH */
#cse-search-results iframe {
	width:100%!important;
	min-width:630px!important;
	max-height:700px!important;
	overflow:auto!important;
}
.results h1 {
	font-size:1.9em;
	margin:10px;
	font-weight:bold;
}
a:link {
	color:#FFFFFF;
	text-decoration:none;
}
body {
	background: rgb(125,126,125);
	background: -moz-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(125,126,125,1)), color-stop(100%, rgba(14,14,14,1)));
	background: -webkit-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: -o-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: -ms-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: linear-gradient(to right, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
}
#container {
	/*min-width:780px; your enemy*/
	max-width: 70%;
	margin:50px auto 0;
	background:#FFFFFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 15px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
@media screen and (max-width: 1100px) {
#container {
	width:85%;
	max-width:none;
}
}
@media screen and (max-width: 800px) {
#container {
	width:99%;
	max-width:none;
}
}
#header {
	padding-left:399px;
	background: #FFFFFF url("http://www.codefundamentals.com/images/logo.gif") no-repeat;
	min-height:186px;
}
.followHeader {
	clear:right;
	float:right;
	min-width: 250px;
	font-size:0;
}
.followHeader a {
	margin-left:7px;
}
ul#navigation {
	float:right;
	min-width:361px;
	margin:20px 10px 20px 0;
	background: rgb(206,220,231);
	background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(206,220,231,1)), color-stop(100%, rgba(89,106,114,1)));
	background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	background: -o-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	background: linear-gradient(to bottom, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	border-radius:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
ul#navigation li {
	float:left;
	width:14.28%;
	max-width:5em;
	background: rgb(177,232,200);
	background: -moz-linear-gradient(top, rgba(177,232,200,1) 0%, rgba(79,118,99,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(177,232,200,1)), color-stop(100%, rgba(79,118,99,1)));
	background: -webkit-linear-gradient(top, rgba(177,232,200,1) 0%, rgba(79,118,99,1) 100%);
	background: -o-linear-gradient(top, rgba(177,232,200,1) 0%, rgba(79,118,99,1) 100%);
	background: -ms-linear-gradient(top, rgba(177,232,200,1) 0%, rgba(79,118,99,1) 100%);
	background: linear-gradient(to bottom, rgba(177,232,200,1) 0%, rgba(79,118,99,1) 100%);
}
ul#navigation li.current {
	background: rgb(125,126,125); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(45,45,45,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(125,126,125,1)), color-stop(100%, rgba(45,45,45,1)));
	background: -webkit-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(45,45,45,1) 100%);
	background: -o-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(45,45,45,1) 100%);
	background: -ms-linear-gradient(left, rgba(125,126,125,1) 0%, rgba(45,45,45,1) 100%);
	background: linear-gradient(to right, rgba(125,126,125,1) 0%, rgba(45,45,45,1) 100%);
	color:#FFF;
}
ul#navigation li.current a:hover {
	color:#FFFFFF;
}
ul#navigation li:first-child {
	border-radius: 10px 0 0 10px;
}
ul#navigation li:last-child {
	border-radius: 0 10px 10px 0;
}
ul#navigation li a:link {
	color:#FFFFFF;
	padding:7px 0px;
	text-decoration:none;
	width:inherit;
	text-align:center;
	display:table-cell;
	height:50px;
	vertical-align:middle;
}
ul#navigation li a:visited {
	color:#FFFFFF;
}
ul#navigation li a:hover {
	color:#FFFFFF;
}
ul#navigation li a:active {
	color:#000000;
}
ul#navigation li:hover {
	color:#000000;
	background: rgb(167,207,223);
	background: -moz-linear-gradient(left, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(167,207,223,1)), color-stop(100%, rgba(35,83,138,1)));
	background: -webkit-linear-gradient(left, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
	background: -o-linear-gradient(left, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
	background: -ms-linear-gradient(left, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
	background: linear-gradient(to right, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
}
.search {
	float:right;
	margin:10px 0 0 0;
}
.search input {
	width:160px;
	margin-right:2px;
	float:left;
}
.search button {
	background:#999999 url("http://www.codefundamentals.com/images/search.jpg") no-repeat;
	width:32px;
	float:left;
	height:24px;
	cursor:pointer;
	text-indent:-9999px;
	border:0;
	margin:4px 5px 0 3px;
}
#main {
	background:#D1CACA url("http://www.codefundamentals.com/images/sidebarGradient.jpg") repeat-y;
	position:relative;
}
#sidebar {
	width:150px;
	padding-top:5px;
	float:left;
	border-right:1px solid #000000;
}
#sidebar li {
	padding:0 7px 7px 7px;
	color:#FFFFFF;
}
#sidebar header {
	font-weight:bold;
	padding:5px;
	text-align:center;
	background:#E5E5E5;
	width:130px;
	margin:0 auto 5px;
}
#sidebar li a:link, #sidebar li a:visited {
	color:#FFFFFF;
}
#sidebar li a:hover {
	color:#222222;
}
#mainContent {
	margin-left: 146px;
	padding-left:5px;
	overflow:hidden;
	border-left:1px solid #000;
	position:relative;
	left:-1px;
}
body.home #mainContent h1:first-letter {
	font-size:2.3em;
}
#mainContent p {
	line-height:1em;
	margin-bottom:10px;
	font-size:1.2em;
}
.home #mainContent h1 {
	font-size:1.9em;
	margin:5px 0;
}
.home #mainContent h2 {
	margin:5px 0;
	font-size:1.6em;
}
.home #mainContent p {
	margin-top:10px;
}
#mainContent a:link {
	color:#4BA1A6;
}
#mainContent a:hover {
	color:#397A7D
}
#mainContent a:active {
	color:#096469
}
#footer {
	background:#222222;
	overflow:hidden;
	color:#8BE6FA;
	clear:both;
	padding:1em 0 5px 5px;
	border-radius: 0 0 15px 15px;
}
.subscribe {
	float:left;
	width: 180px;
}
.subscribe label {
	margin-top:4px;
	display:block;
}
.subscribe form {
	margin-bottom:15px;
}
#footer .unsubscribe a {
	color:#A1D1C5;
}
.followFooter {
	float:left;
	width: 165px;
	margin-left:10px;
}
.followFooter a {
	float:left;
	clear:left;
	margin-bottom:5px;
}
.followFooter a:visited {
	color:#FFFFFF;
}
#footer header, #footer legend {
	font-weight:bold;
	color:#FFFFFF;
	padding-bottom:5px;
}
.copyright {
	margin-left:355px;
	margin-right:220px;
}
.copyright span {
	color:#666666;
	font-size:.8em;
}
#footer .links {
	float:right;
	width:200px;
	margin-left:20px;
}
#footer .links li {
	border-bottom:1px solid #333;
	line-height:1.25em;
	padding:0.75em;
}
#footer .links a {
	color:#8BE6FA;
}
div.contactForm, div.unsubscribeForm {
	width:80%;
	background:#FFFFFF;
	margin: 20px auto;
	padding:5px;
}
div.contactForm h1, div.unsubscribeForm h1 {
	font-size:1.4em;
	text-align:center;
	font-weight:bold;
}
div.contactForm label, div.contactForm input, div.unsubscribeForm label, div.unsubscribeForm input {
	display:block;
}
input, textarea, select, button {
	max-width: 100%;
	font-size: 100%;
}
input, textarea {
	border-radius: 2px;
	padding: 7px;
	border: 1px solid #E5E5E5;
	background: #fcfcfc;
	font-size: .8em;
}
textarea {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	line-height: 1.5em;
}
textarea:focus, input:focus {
 -webkit-box-shadow 1px 1px 5px #E5E5E5;
	-moz-box-shadow: inset 1px 1px 5px #E5E5E5;
	box-shadow: inset 1px 1px 5px #E5E5E5;
	outline: none;
	background: #FFFFFF;
}
input[type=submit] {
	border : solid 1px #000000;
	border-radius : 5px;
	-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	font-size : 20px;
	color : #FFFFFF;
	cursor:pointer;
	padding : 1px 17px;
	background-color : #403e40;
	margin-top:5px;
}
.error {
	color:#B30E2C;
	padding:2px;
	font-size:1.2em;
	font-weight:300;
	text-align:center;
}
.errorImg {
	display:block;
	width:275px;
	margin:10px auto;
}
.imgHire, .checkThisOut, .welcome {
	float:left;
	margin:0px 10px 5px 0;
}
img.welcome {
	width:50%;
	height:auto;
	max-width:398px;
}
.home #mainContent h1, .home #mainContent h2 {
	text-align:center;
	margin:5px 0;
}
.services h1, .links h1, .demos h1, .portfolio h1 {
	font-size:1.8em;
	font-weight:700;
	margin:5px 0;
	text-align:center;
}
.services h2 {
	font-size:1.5em;
	font-weight:700;
	margin:5px 0 10px;
	text-align:center;
}
.links #mainContent ul, .demos #mainContent ul {
	clear:both;
	border-top:1px dotted #000000;
	padding-top:4px;
	list-style-type:circle;
	padding-left:1em;
	margin-top:10px;
}
.links #mainContent ul a, .demos #mainContent ul li>a {
	font-size:1.3em;
	margin-bottom:5px;
}
.demos #mainContent ul li span {
	display:block;
	padding-left:1.1em;
}
.portfolio #mainContent h2 {
	border-bottom:1px dotted #000000;
	padding-bottom:5px;
	margin-bottom:10px;
}
.portfolio #mainContent ul li {
	float:left;
	margin-bottom:10px;
	margin-right:5px;
}
.portfolio #mainContent li>a {
	display:block;
}
.portfolio #mainContent span {
	text-align:center;
	display:block;
}
.disclaimer {
	color: #B30E2C;
	margin:15px 0;
	font-weight:bold;
	clear:both;
	padding-top:5px;
	text-align:center;
	font-size:1.3em;
}
.admin #mainContent .logout {
	position:absolute;
	top:0;
	right:0;
	margin:5px 5px 0 0;
	color:#B30E2C;
	font-size:1.2em;
	font-weight:bold;
}
.admin #mainContent #adminForm {
	position:relative;
	min-height:400px;
}
.admin #mainContent #adminForm form {
	position:absolute;
	top:50%;
	min-height:100px;
	margin-top:-50px;
	width:100%;
}
.admin #mainContent #adminForm fieldset {
	padding:.8em;
	border: 2px groove threedface;
}
.admin #mainContent #articleForm {
	width:80%;
	background:#FFFFFF;
	margin: 20px auto;
	padding:5px;
}
.admin #mainContent #articleForm label, .admin #mainContent #articleForm input {
	display:block;
}
.success, .articleConfirmation {
	width: 70%;
	border: 1px solid #000000;
	margin: 20px auto 0;
	text-align: center;
	padding: 10px;
	font-weight: bold;
}
.blog #mainContent {
	padding:0 7% 0;
}
.blog #mainContent h1 {
	font-size: 1.8em;
	text-align: center;
	font-weight: bold;
	margin: 20px 0;
}
.blog #mainContent .articleDetails {
	margin:0 5px 20px;
	font-size:.9em;
	border-bottom:1px dotted #000000;
}
.blog #mainContent .articleDetails img {
	display:inline-block;
}
.blog #mainContent .articleContent {
	padding:10px;
}
.blog #mainContent .articleTags {
	font-weight:bold;
	margin-top:20px;
	font-size:.9em;
	padding:10px;
}
.blog #mainContent .articleTags a {
	font-weight:normal;
}
.blog #mainContent table {
	margin:20px 0;
	background:#FFF;
}
.blog #mainContent table td {
	border: 2px solid #ccc;
	padding:20px;
	vertical-align:middle;
}
.blog #mainContent table tr td:first-child {
	width:66%;
}
.blog #mainContent table tr>td+td {
	white-space:nowrap;
}
.blog #mainContent td header {
	font-size:1.4em;
	margin-bottom:10px;
}
.blog #mainContent td header+p {
	font-size:1em;
}
.blog #mainContent header.article {
	font-size:1.3em;
	font-weight:bold;
	padding-left:10px;
}
@media screen and (max-width:1100px) {
ul#navigation, .search, .followHeader {
	float:none;
	display:inline-block;
	min-width:0;
	clear:both;
}
#header {
	padding-left:0;
	text-align:center;
	background:transparent;/* swap for a smaller image to go along the top/ or use the before code below*/
}
#header:before {
	content:"Code Fundamentals - Raw code - Raw talent";
	display:block;
	padding:10px 0;
	font-size:28px;
}
}
@media screen and (max-width:900px) {
.subscribe, .followFooter, .links, .copyright, #footer .links {
	float:none;
	width:auto;
	margin:10px 0
}
.followFooter a {
	display:inline-block;
	float:none
}
}
@media screen and (max-width:500px) {
ul#navigation {
	display:block;
}
ul#navigation li,  ul#navigation li a,  ul#navigation li a:link {
	float:none;
	display:block;
	width:auto;
	border-radius:0;
	max-width:none;
	text-align:center;
	height:auto;
}
ul#navigation li:first-child, ul#navigation li:last-child {
	border-radius:0
}
ul#navigation li a {
	padding:20px 0;
}
#sidebar {
	float:none;
	width:auto;
	margin:20px 0;
	border:none
}
#mainContent {
	margin:20px 0;
	left:0;
	border:none
}
#main {
	background:none
}
}
</style>

<!--<link href="/scripts/codeScript.css" type="text/css" rel="stylesheet" />-->
<style>
main
{
	display:block;
	width:55%;
	min-width:18em;
	margin:2em auto;
}
figure
{
	display:block;
	margin:1em 0;
	border:1px solid #ccc;
	border-radius:3px;
	background:#eee;
}
figure figcaption
{
	display:block;
	padding:5px 10px 4px 10px;
	border-bottom:1px solid #ccc;
	border-radius:3px 3px 0 0;
	font-weight:bold;
	background:#ddd;
	color:#777;
}
pre, pre *
{
	font:normal normal normal 1em/1.4 monaco, courier, monospace;
}
pre
{
	font-size:0.8em;
}
pre, pre code, pre samp
{
	display:block;
	margin:0;
	cursor:text;
}
pre code, pre samp
{
	white-space:pre;
	word-wrap:normal;
	padding:10px;
	-moz-tab-size:4;
	-o-tab-size:4;
	tab-size:4;
	overflow-x:auto;
}
pre [contenteditable]:focus
{
	border-radius:0 0 3px 0;
	background:#fff;
	outline:none;
	box-shadow:inset 0 1px 4px 1px rgba(0,0,0,0.5);
}
pre.line-numbers
{
	position:relative;
}
pre.line-numbers code, pre.line-numbers samp
{
	margin-left:3em;
	border-left:1px solid #ccc;
}
pre.line-numbers > div
{
	display:block;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	border-radius:0 0 0 3px;
	background:#e5e5e5;
	overflow:hidden;
	counter-reset:line;
}
pre.line-numbers > div > span
{
	display:block;
	width:2.5em;
	padding:0 0.5em 0 0;
	text-align:right;
	color:#777;
	overflow:hidden;
	counter-increment:line;
}
pre.line-numbers > div > span::before
{
	content:counter(line);
}
pre.line-numbers > div > span:first-child
{
	margin-top:10px;
}
pre.line-numbers > div > span:nth-child(odd)
{
	background:#dfdfdf;
}
@media print
{
	pre code
	{
		overflow-x:visible;
		white-space:pre-wrap;
	}
	pre.line-numbers div
	{
		display:none;
	}
	pre.line-numbers > code, pre.line-numbers > samp
	{
		margin-left:0;
	}
}
pre b, pre strong
{
	font-weight:normal;
	color:#039;
}
pre u, pre u b, pre u strong
{
	text-decoration:none;
	color:#083;
}
pre i, pre em, pre i *, pre em *, pre i * *, pre em * *
{
	letter-spacing:-0.1em;
	text-decoration:none;
	font-style:normal;
	color:#c55;
}

</style>

<!--<link href="/scripts/mobile.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />-->
<!--
<style>
@media screen and (max-width: 480px){
body{background:red}
#container
{
	max-width:90%;
}
ul#navigation li a:link
{
	font-size:.7em;
}
#mainContent p
{
	line-height:normal;
	font-size:.7em;
}
body.home #mainContent h1:first-letter
{
	font-size:initial;
}
.home #mainContent h1
{
	font-size:1em;
}
.home #mainContent h2
{
	font-size:.9em;
}
.copyright header, .copyright p, .copyright span
{
	font-size:60%;
}
.blog #mainContent h1, .links h1, .demos h1, .portfolio h1
{
	font-size: 1.1em;
}
.blog #mainContent p.articleContent
{
	font-size:.9em;
}
.services h1
{
	font-size:.9em;
}
.services h2
{
	font-size:.8em;
}
.links #mainContent ul a, .demos #mainContent ul li>a, .demos #mainContent span
{
	font-size:.8em;
}
#mainContent
{
	padding:0;
}
img.welcome
{
	width:30%;
	height:30%;
}
.subscribe
{
	margin-right:10px;
}
.followFooter
{
	width:150px;
}	

}
</style>
-->

<style type="text/css">
	@import url(http://www.google.com/cse/api/branding.css);
</style>
<script type="text/javascript" src="http://www.codefundamentals.com/scripts/scripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://www.codefundamentals.com/scripts/lightbox.js"></script>
</head>
<body class="home">
<div id="container" class="clearfix">
		<div id="header" class="clearfix">
				<ul id="navigation">
						<li class="current"><a href="/index.php" title="Home">Home</a></li>
						<li ><a href="/blog/index.php" title="Blog">Blog</a></li>
						<li ><a href="/demos/index.php" title="Demos">Demos</a></li>
						<li ><a href="/services.php" title="Services">Services</a></li>
						<li ><a href="/portfolio.php" title="Portfolio">Portfolio</a></li>
						<li ><a href="/contact.php" title="Contact">Contact</a></li>
						<li ><a href="/links.php" title="Link">Links</a></li>
				</ul>
				<div class="followHeader"> <a href="https://www.facebook.com/pages/Code-Fundamentals/1521533601413118?sk=timeline" title="Facebook"><img src="http://www.codefundamentals.com/images/fbIcon.png" alt="FaceBook" /></a> <a href="https://twitter.com/CodeFundamental" title="Twitter"><img src="http://www.codefundamentals.com/images/twitterIcon.png" alt="Twitter" /></a> <a href="/blog/index.php" title="Blog"><img src="http://www.codefundamentals.com/images/blogIcon.gif" alt="Blog" /></a> <a href="/contact.php" title="Email"><img src="http://www.codefundamentals.com/images/emailIcon.jpg" alt="Contact" /></a> </div>
				<div class="search">
						<div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
								<div class="cse-branding-form">
										<form action="http://www.codefundamentals.com/search.php" id="cse-search-box">
												<input type="hidden" name="cx" value="partner-pub-6536761335731449:6059988748" />
												<input type="hidden" name="cof" value="FORID:10" />
												<input type="hidden" name="ie" value="UTF-8" />
												<input type="search" name="q" placeholder="Search">
												<button type="submit" name="sa">Submit</button>
										</form>
								</div>
						</div>
				</div>
		</div>
		<div id="main" class="clearfix">
				<div id="sidebar">
						<header>New Articles!</header>
						<ul>
								<li>1) <a href="/blog/why-validate-website.php">Why Validate Your Website?</a></li>
						</ul>
				</div>
				<div id="mainContent">
						<h1>Welcome to CodeFundamentals.com</h1>
						<h2>I'm Ryan Reese - Freelance Web Designer</h2>
						<img src="http://www.codefundamentals.com/images/ryancartoon.png" alt="CodeFundamentals Creator" title="CodeFundamentals Creator" class="welcome" />
						<p>If you are looking for web design services at a reasonable price, feel free to go to my <a href="/services.php">services</a> page to get a free estimate. I have 7 years of experience with HTML and CSS, along with working knowledge of JavaScript, PHP, SQL, and Java. All the tools needed to create and code a working piece of art - a website.</p>
						<p>Finding someone to create and work on this project is easy. There are hundreds of other businesses willing to do the work, so why choose CodeFundamentals? Every client will be worked with to create a tailor-made visual representation of what they wish to achieve, along with giving CodeFundamentals a good understanding of their goals, and needs. The final product will be just as effective as it is elegant.</p>
						<p>We pride ourselves with clean, cross-browser compatible code. This means that no matter who views your final piece of work, on any work station, on any browser, and on any resolution - your website will appear as intended.</p>
						<p>No matter what size project, or what challenge is presented, CodeFundamentals is always willing to take it on headfirst. Feel free to check out the <a href="/services.php">services</a> page to get in touch with me about any freelance projects, or even exciting employment offers! Please take a look at my <a href="/portfolio.php">portfolio</a>, and <a href="/contact.php">contact me</a> about how CodeFundamentals can help you achieve your goals. If you are a potential employer, whether it be a career offer, or a prospective client, you may use my contact form and request a copy of my résumé. </p>
				</div>
		</div>
		<div id="footer" class="clearfix">
				<div class="subscribe">
						<form action="#" method="post" id="subscribeForm" name="subscribeForm" onSubmit="return validateSubscribeForm();">
								<fieldset>
										<legend>Subscribe to our newsletter!</legend>
										<label for="subscribeName">Name: </label>
										<input name="subscribeName" type="text" id="subscribeName">
										<label for="subscribeEmail">E-mail: </label>
										<input name="subscribeEmail" type="text" id="subscribeEmail">
										<input type="submit" value="Subscribe">
								</fieldset>
						</form>
						<p class="unsubscribe"><a href="/unsubscribe.php">Click here to unsubscribe</a></p>
						<script async src="http://www.codefundamentals.com//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
						<!-- footerCode --> 
						<ins class="adsbygoogle"
			style="display:inline-block;width:180px;height:300px"
			data-ad-client="ca-pub-6536761335731449"
			data-ad-slot="2548119148"></ins> 
						<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script> 
				</div>
				<div class="followFooter">
						<header>Follow us on Social Media!</header>
						<a href="https://www.facebook.com/pages/Code-Fundamentals/1521533601413118?sk=timeline" title="Facebook"><img src="http://www.codefundamentals.com/images/fbIconFooter.png" alt="FaceBook" /></a> <a href="https://twitter.com/CodeFundamental" title="Twitter"><img src="http://www.codefundamentals.com/images/twitterIconFooter.png" alt="Twitter" /></a> <a href="/blog/index.php"  title="Blog"><img src="http://www.codefundamentals.com/images/blogIconFooter.jpg" alt="Blog" /></a> <a href="/contact.php" title="Email"><img src="http://www.codefundamentals.com/images/emailIconFooter.jpg" alt="Contact" /></a> </div>
				<div class="links">
						<header>Links</header>
						<ul>
								<li><a href="/index.php">Home</a></li>
								<li><a href="/blog/index.php">Blog</a></li>
								<li><a href="/demos/index.php">Demos</a></li>
								<li><a href="/services.php">Services</a></li>
								<li><a href="/portfolio.php">Portfolio</a></li>
								<li><a href="/contact.php">Contact</a></li>
								<li><a href="/links.php">Links</a></li>
						</ul>
				</div>
				<div class="copyright">
						<header>Copyright &amp; Usage</header>
						<p>The content used in the portfolio and elsewhere throughout this site is protected under copyright laws. If you like what you see, please do not copy. Consider hiring me instead.</p>
						<p>The code samples and techniques used on the blog articles of this site can be used in whatever manner you wish without attribution.</p>
						<span>Copyright (&copy;) 2014 CodeFundamentals</span> </div>
		</div>
		<script type="text/javascript" src="http://www.codefundamentals.com/scripts/codeCounter.js"></script> 
</div>
</body>
</html>

Just open and close it in your browsers to get an indication of how it will look in a mobile. Of course some mobiles have bugs and differences but as a rule of thumb this approach is best.