I am in some dire need of help. I am so close to finishing my final but I don't quite understand media queries. I have to "include a media query to change the page to fit on a tablet and a mobile query. You will be shrinking the width of the page to fit. You will also be turning off visibility to an image of your choice."
He didn't go over it too well and I've been scouring sites in confusion. Now I'm not sure what sizes to use or if I need to code a completely new layout for the phone and tablet. I just need some guidance please.
Not sure if code is needed for this but I'll include one page and the css just in case:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#nav {
float: right;
width: 500px;
height: 700px;
background-color: #6C8822;
color: black;
padding-left: 10px;
padding-top: 10px;
margin-right: 50px;
margin-bottom: 0px;
text-align: center;
}
#links {
margin-top: 20px;
}
a {
text-decoration: none;
color: white;
font-size: 35px;
margin-top: 70px;
}
a:hover {
color: #645399;
}
#linkborder1 {
border: 2px dotted white;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#linkborder2 {
border: 2px dotted white;
padding: 5px;
padding-left: 34px;
padding-right: 34px;
}
#linkborder1:hover {
border-color: #645399;
}
#linkborder2:hover {
border-color: #645399;
}
#header {
text-align: center;
margin-bottom: 50px;
background-color: #6C8822;
color: white;
font-size: 50px;
font-family: Comic San MS;
}
body {
background-image: url("images/bg1.jpg");
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
overflow: auto;
}
html {
overflow: hidden;
height: 100%;
}
img {
margin-left: 25px;
margin-top: 25px;
margin-right: 25px;
}
p {
font-size: 30px;
font-family: Comic Sans MS;
display: inline-block;
margin: 15px;
padding: 10px;
background-color: #CCD994;
}
#textbio {
width: 100px;
height: 50px;
margin: 15px;
padding: 10px;
}
#imagemap {
margin-left: 80px;
}
video {
margin-top: 50px;
margin-left: 105px;
margin-bottom: 25px;
width: 1280px;
height: 720;
}
#imagemap, #vid {
display : inline;
position: relative;
left:50px;
}
caption {
font-size: 24px;
}
th {
background-color: #CCD994;
}
td {
height: 50px;
border-bottom: 1.5px dashed;
width: 300px;
}
tfoot {
background-color: gray;
}
table {
table-layout: auto;
width: 15%;
float: right;
margin-bottom: 10px;
background-color: #6C8822;
position: relative;
margin: -500px;
margin-top: 480px;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
z-index: -1
}
#pics {
margin-left: 250px;
padding: 15px;
margin-bottom: 100px;
}
#table {
float: right;
margin-right: 50px;
width: 600px;
height: 700px;
font-size: 20px;
}
#form {
float: center;
background-color: #6C8822;
margin: 15px;
margin-left: 500px;
width: 600px;
font-size: 36px;
margin-bottom: 100px;
}
input {
height: 30px;
font-size: 20px;
}
select {
font-size: 36px;
}<!Doctype HTML>
<html>
<head>
<title>Page 2</title>
<link rel="stylesheet" href="finalcss.css">
</head>
<div id="header" class="center">
<h1>Final Project</h1>
</div>
<div id="nav">
<img src="images/me.png" alt="Me in Animal Crossing" width="350" height="300">
<div class="textbio">
<p>Hey I'm Jay, this is my final project! It's not much but I worked hard on it, hope you enjoy!!</p>
</div>
<div id="links">
<a id="linkborder1" href="final.html">Home</a>
<br>
<br>
<a id="linkborder2" href="final2.html">P2</a>
<br>
<br>
</div>
</div>
<div id="body">
<div id="pics">
<img src="images/padme.png" alt="" width="450px" height="450px">
<img src="images/sqs.png" alt="" width="450px" height="450px">
<br>
<img src="images/reese.jpg" alt="" width="450px" height="450px">
<img src="images/lotus.png" alt="" width="450px" height="450px">
</div>
</div>
<div id="table" class="fixed">
<table class="center">
<Caption><b>Commission</b></Caption>
<thead align="center">
<th colspan="5"><b>Type</b></th>
<th><b>Price Range</b></th>
</thead>
<tbody align="center">
<tr>
<td colspan="5">Icon</td>
<td>$5-$15</td>
</tr>
<tr>
<td colspan="5">Half-Body</td>
<td>3</td>
</tr>
<tr>
<td colspan="5">Full-Body</td>
<td>$5-$25</td>
</tr>
</tbody>
</table>
</div>
<div id="form">
<Caption><b> Contact Form</b></Caption>
<table>
<thead align="center">
</thead>
<tbody align="center">
<br>
<br>
<fieldset>
<legend></legend>
Name: <input type="text" name="name" size="40">
<br>
<br>
Address Line 1: <input type="text" name="addressline1" size="40">
<br>
<br>
Address Line 2: <input type="text" name="addressline2" size="40">
<br>
<br>
City: <input type="text" name="city" size="40">
<br>
<br>
State: <input type="text" name="state" size="40">
<br>
<br>
Zip Code: <input type="text" name="zipcode" size="40">
<br>
<br>
Email: <input type="text" name="email" size="40">
<br>
<br>
Phone Number: <input type="text" name="phonenumber" size="40">
<br>
<br>
<select name="Contact Times">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
</fieldset>
</tbody>
</table>
</div>
</html>as i can see you are just a starter, first of all you need to use viewport code to get the page working on all different devices, the view port code is below.
<meta name="viewport" content="width=device-width, initial-scale=1">
after this inside your CSS file you will need to use media query, this is a break point where you see the design/website/page is not usable at some browser width, at this with you will need to add media query like:
@media query and (max-width: 400px){ // here you should update the broken css code}
if you don't use the view port your query won't work, also you need to add <body></body> to your code, it's not required by the modern browsers but you have to do it as the older browsers won't understand your code and your page will be broken and not usable.
some more information can be found below:
another Media query source (CSS Tricks
HTML5 responsive web pages W3C
hope this help