My template looks pretty much the way I want it on my desktop but when I load it on my phone in either view the navigation on the left side does not resize to fit like the rest of the page does. You can view the layout at http://www.mytournamentonline.com/work/template3.php.
I would appreciate any help. Some of the css items may be redundant but I though tit was working then realized it was not displaying properly on my phone so I've tried all kinds of updates to get it working.
<style>
body {
background-color: #666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#container {
width: 80%;
margin: 0 auto;
background-color:#12295d;
border:5px solid #a6c250;
}
#header img {
width:100%;
margin:auto;
height: auto;
}
#content {
float:right;
width:81%;
background-color:#FFFFFF;
border-left:5px solid #a6c250;
min-height:350px;
}
#sidebar {
float:left;
width:18%;
}
#primary {
float: left;
width: 98%;
background-color:#245192;
border-top: 0;
}
/* nav */
nav {
background-color:#245192;
width:100%;
float:left;
height:inherit;
}
/* navigation button styles */
a.btn {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a.btn:hover {
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
.currentpage {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
#footer {
clear:both;
clear: both;
text-align:center;
width:100$;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #DCF414;
border-top: 5px solid #a6c250;
background-color: #12295d;
}
</style>
<body>
<div id="container">
<div id="header">
<img src="images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>
<div id="content">
<div style="padding:10px;">
<p>Main content</p>
</div>
</div>
<div id="sidebar">
<div id="primary">
<nav>
<?php
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
?>
<a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
<a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
<a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
<a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
<a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>
</nav>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
