I apologize if this is not the most descriptive, as I only have 7 weeks experience of coding with HTML. So I have encountered an issue with optomizing my webpage for a mobile device using a media query. My Nav bar goes off the screen, my form gets all smashed at the bottom, and my table on a seperate page disappears at 700ish pixels. I will copy and paste the code below for each page that is giving me issues!
Home page with Nav bar and Form issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness</title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="index.html">ZabelFitness</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="about.html"><b>About ZabelFitness</b></a></li>
<li><a href="when.html"><b>When To Workout</b></a></li>
<li><a href="exercise.html"><b>Exercises</b></a></li>
<li><a href="diet.html"><b>Diets</b></a></li>
<li><a href="supps.html"><b>Supplements</b></a></li>
<li><a href="reference.html"><b>References</b></a></li>
</ul>
</nav>
<main>
<div >
<div >
<img id="homeimage" src="pose.jpg" alt="Big Muscles" title="Yours Truly striking a pose!" style="width:100%">
</div>
</div>
<h2> LEAVE HERE KNOWING MORE THAN YOU USED TO!!</h2>
<p> <span class= "resort"> ZabelFitness </span> is a one-stop shop for athletes of all skill levels. This site exsits to condense<br>
key information that many have to look for over many different sites! I want to make your life easier!!<br> That's why I created this site (named after my Instagram page) to give all athletes legit information<br>they will want or need in their fitness journey!!</p>
</main>
<h2 id="h2home" > Reach Out For Fitness Advice!!</h2>
<h3> Contact Me</h3>
<p>Required fields are marked with an asterisk *</p>
<form method="post" action="mailto:[email protected]">
<label for="myFName">*First Name:</label>
<input type="text" name="myFName" id="myFName" required="required">
<label for="myLName">*Last Name:</label>
<input type="text" name="myLName" id="myLName" required="required">
<label for="myEmail">*E-mail:</label>
<input type="email" name="myEmail" id="myEmail" required="required" size="35">
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Additional Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
<input type="submit" id="mySubmit" value="Submit">
</form>
<footer>
<small> <i> Copyright © 2021 ZabelFitness<br>
<a href="mailto:[email protected]">zabel2@ivytech</a></i></small>
</footer>
</div>
</body>
</html>
exercise page with wonky table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness::About </title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="index.html">ZabelFitness</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="about.html"><b>About ZabelFitness</b></a></li>
<li><a href="when.html"><b>When To Workout</b></a></li>
<li><a href="exercise.html"><b>Exercises</b></a></li>
<li><a href="diet.html"><b>Diets</b></a></li>
<li><a href="supps.html"><b>Supplements</b></a></li>
<li><a href="reference.html"><b>References</b></a></li>
</ul>
</nav>
<main>
<table>
<tr>
<th colspan="8">Guide To Exercises</th>
</tr>
<tr>
<td>Muscle Group</td>
<td>Chest</td>
<td>Triceps</td>
<td>Biceps</td>
<td>Back</td>
<td>Quads</td>
<td>Calves</td>
<td>Hamstrings</td>
</tr>
<tr>
<td>Exercise</td>
<td>Dumbbell/Barbell Bench PressPush-UpsDecline Dumbbell/Barbell Bench PressIncline Dumbbell/Barbell Bench Press</td>
<td>sds</td>
<td>ssds</td>
<td>sds</td>
<td>sds</td>
<td>sd</td>
<td>sd</td>
</tr>
</table>
</main>
<footer>
Copyright © 2021 ZabelFitness <br>
<a href="mailto:[email protected]">zabel2@ivytech</a>
</footer>
</div>
</body>
</html>
CSS for all my jank:
header { background-color: #36454F;
padding-top:10px;
height: 120px;
text-align: center;
color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
text-shadow: 2px 2px 8px #000000;
background-position: right;
background-repeat: no-repeat;
margin-bottom: 0%;
padding: 1em;
background-image: url(weights2.jpg);
background-size: 100%;
}
body { background-color: #404040;
color: #666666 ;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto ;
margin-right: auto;
width: 80% ;
}
nav a{
text-decoration: none; color:#000000;
}
h1 a{text-decoration: none; color:#FFFFFF;}
h1 a:link{color:#FFFFFF;}
h1 a:hover{color:#A52A2A;}
h1 { color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
nav a:link{color:#000000;}
nav a:visited{color:#344873;}
nav a:hover{color:#A52A2A;}
nav ul {list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding-left: 0;
max-width:1800px;
text-align: center;
}
nav {text-align: center;}
nav li {padding-top: 1em;
display: inline-block;
padding-left: 3em;
padding-right: 3em;
width: 100%;
border-bottom: 1px solid;
font-size: 1.2em;
text-align: center;
max-width:1800px;
}
h2{ color: #A52A2A ;
font-family: Verdana, Arial, sans-serif ;
line-height: 200% ;
padding-top: 2.5em;
padding-bottom: 2em;
}
h3 {font-family: Georgia, 'Times New Roman', Times, serif;
}
dt { font-weight: bold;
color: #002171
}
main {
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 0;
}
#homeimage {
float:center;
width: 240px;
height: 300px;
}
#homehero {
background-size: 200% 100%;
background-repeat: no-repeat;
}
#abouthero{
height: 300px;
background-size: 200% 100%;
background-repeat: no-repeat;
}
#aboutimage{width:480px;
height: 480px;
}
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 200% 100%;
background-repeat: no-repeat;
}
.resort { font-size: 1.2em;
color: #000033;
}
#wrapper {
background-color: #BEBEBE;
background-image: linear-gradient(#FFFFFF, #BEBEBE);
padding: 1em;
}
footer { font-size: .70em;
padding: 1em;
font-style: italic;
text-align : center;
}
* {box-sizing: border-box;}
section {
padding-left:.5em;
padding-right: .5em;
}
#mobile {display: inline;}
#desktop {display: none;}
@media (min-width: 600px) {
h1{font-size: 2em; letter-spacing: .25em;}
nav ul{flex-direction: row; justify-content: space-around; padding-right: .5em;}
nav li{width: 12em; border-bottom: none;}
section{padding-left: 2em; padding-right: 2em;}
#flow{display:flex; flex-direction:column;}
#mobile{display:none;}
#desktop{display:inline;}
#homehero{background-size: 100% 100%;}
#yurthero{background-size: 100% 100%;}
#trailhero{background-size: 100% 100%;}
#reshero{background-size:100% 100%}
input[type="submit"]{width:9em; grid-column:2/3;}
form{width:60%;
display:grid;
grid-gap:0.5em;
grid-template-columns: 10em 1fr;}
}
@media (min-width: 1801px) {
body{background-color: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);}
nav ul{padding-right: 10%; padding-left: 10%; padding-bottom:3em;}
#wrapper{margin:auto; width: 80%;}
#aboutimage{width:360px; height: 360px;}
header{background-image:100% 100%}
#homeimage{width:360px; height: 360px; float: center; }
@media (min-width: 1080px) {
table thead {
display: none;
}
table td {
display: flex;
}
table td::before {
content: attr(label);
font-weight: bold;
width: 120px;
min-width: 120px;
}
}
textarea, input{margin-bottom:.5em; width: 400px;}
.column {
float: left;
width: 33.33%;
padding: 5px;
padding-top: 10px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
table{
margin: auto;
text-align: center;
border: 1px solid #3399CC;
width: 90%;
border-collapse: collapse;
}
td, th{
color: #000;
padding: 5px;
border: 1px solid #3399CC;
}
td{text-align: center;}
.text{
text-align: left;
}
tr:nth-of-type(odd){ background-color: #B0B0B0;}
tr:nth-of-type(even){ background-color: #696969;}
THANK YOU IN ADVANCE!!! :)
CodePudding user response：
You should only place the max-width in the body tag along with a min-width in your css. You are setting your ul to a max-width of 1800px which is for a desktop. When you set a min-width to the body it will adjust for phones.
body{
max-width: 1800px;
min-width: 200px;
}
If your code is specific to phones only where they would not be viewed in a browser on a laptop or desktop, you could set the max-width:400px. Thus on a phone the browser will span only 400px and if the user minimized the window, the smallest it would get is 200px;
My example means a laptop/browsers will only expand to 1800px on a 1900 resolution screen and then when I minimized the browser on my laptop or in a phone 200px is minimum.
You can play around with the values testing in your browser to see how your data flows. You may have to adjust other tags to flow.
CodePudding user response：
On W3Schools in regards to flex boxes it mentions this
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}