问题
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>
回答1:
You can use media query for you requirement. You can also change some layout to fill in the mobile device.
Try the below code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
}
@media screen and (max-width:680px) {
#sidebar {
float:none;
width:100%;display: block;
}
#content {
float:none;
width:100%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.mytournamentonline.com/work/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></html>回答2:
Use the media query to control the mobile view. start with the #container set width:100% . and in your Html I would suggest moving the sidebar div above the content div then swapping the floats.
Also, i would suggest setting width:100% on all #container > div.
Look into bootstrap link here
回答3:
You can use media query as like below
@media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}
if the width is below 768px then you can make use of above media queries.
来源：https://stackoverflow.com/questions/44712310/css-layout-not-working-on-mobile-device