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 & 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 (©) 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.