I'm pretty sure it's going to be something stupid, but I'm not being able to find the issue myself.
Does anyone knows why my website mobile version looks like this
My mobile version
Instead of this...
How it should look like
Your help is very much appreciated =)
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0px;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0px;
margin: 0px;
padding: 0px;
box-shadow: none;
}
header {
border-bottom: 5px solid #fef6c2;
}
h1 {
margin-top: 0px;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em;
}
nav {
float: none;
width: auto;
padding-top: 0px;
margin: 10px;
font-size: 1.3em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
width: 5em;
font-weight: bold;
border-style: none;
}
nav ul,
#heroroad,
#heromugs,
#heroguitar {
margin: 0px;
padding: 0px;
}
main {
padding: 0px;
margin: 0px;
font-size: 90%;
}
}
#media only screen and (max-width: 768px) {
header {
background-image: url(images/javajammini.jpg);
height: 128px;
}
h1 {
font-size: 2em;
text-align: center;
padding-left: 0px;
}
nav {
margin: 0px;
}
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px #fef6c2;
}
nav li {
display: block;
}
main {
padding-top: 1px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
.details {
padding-left: 0px;
padding-right: 0px;
}
#heroroad,
#heromugs,
#heroguitar {
background-image: none;
height: auto;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
* {
box-sizing: border-box;
}
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #FCEBB6;
color: #221811;
font-family: Arial;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
nav {
text-align: center;
font-weight: bold;
padding-top: 10px;
font-size: 1.5em;
float: left;
}
nav a {
text-decoration: none;
width: 200px;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
padding-left: 3em;
list-style: none;
}
main {
padding: 0em 0em 2em 0em;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
padding: 0em 2em 0em 3em;
}
footer {
background-color: #D2B48C;
font-style: italic;
font-size: .60em;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #221811;
border-top: 2px solid #221811;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 10px 10px 5px #888888;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h4 {
background-color: #d2b48c;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: solid 2px black;
padding-bottom: 0em;
clear: left;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding: 0px 20px 20px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [if lt IE 9]>
<script src="html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<div>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally rosted free-trade coffee and home-made pastries. You'll feel rigth at home at JavaJam!</p>
<h3>JavaJam Coffee House features</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>12312 Main Street<br>Mountain Home, CA 93923<br><a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a> <span id="desktop">1-888-555-5555</span> </p>
</main>
<footer>
<p>JavaJam Copyright © 2013 Coffee House<br>name#email.com</p>
</footer>
</div>
</body>
</html>
Put your (#media) blocks bottom of whole css.
Try this...
#mobile {
display: none;
}
#desktop {
display: inline;
}
* {
box-sizing: border-box;
}
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #FCEBB6;
color: #221811;
font-family: Arial;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
nav {
text-align: center;
font-weight: bold;
padding-top: 10px;
font-size: 1.5em;
float: left;
}
nav a {
text-decoration: none;
width: 200px;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
padding-left: 3em;
list-style: none;
}
main {
padding: 0em 0em 2em 0em;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
padding: 0em 2em 0em 3em;
}
footer {
background-color: #D2B48C;
font-style: italic;
font-size: .60em;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #221811;
border-top: 2px solid #221811;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 10px 10px 5px #888888;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h4 {
background-color: #d2b48c;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: solid 2px black;
padding-bottom: 0em;
clear: left;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding: 0px 20px 20px 0px;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0px;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0px;
margin: 0px;
padding: 0px;
box-shadow: none;
}
header {
border-bottom: 5px solid #fef6c2;
}
h1 {
margin-top: 0px;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em;
}
nav {
float: none;
width: auto;
padding-top: 0px;
margin: 10px;
font-size: 1.3em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
width: 5em;
font-weight: bold;
border-style: none;
}
nav ul,
#heroroad,
#heromugs,
#heroguitar {
margin: 0px;
padding: 0px;
}
main {
padding: 0px;
margin: 0px;
font-size: 90%;
}
}
#media only screen and (max-width: 768px) {
header {
background-image: url(images/javajammini.jpg);
height: 128px;
}
h1 {
font-size: 2em;
text-align: center;
padding-left: 0px;
}
nav {
margin: 0px;
}
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px #fef6c2;
}
nav li {
display: block;
}
main {
padding-top: 1px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
.details {
padding-left: 0px;
padding-right: 0px;
}
#heroroad,
#heromugs,
#heroguitar {
background-image: none;
height: auto;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [if lt IE 9]>
<script src="html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<div>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally rosted free-trade coffee and home-made pastries. You'll feel rigth at home at JavaJam!</p>
<h3>JavaJam Coffee House features</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>12312 Main Street<br>Mountain Home, CA 93923<br><a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a> <span id="desktop">1-888-555-5555</span> </p>
</main>
<footer>
<p>JavaJam Copyright © 2013 Coffee House<br>name#email.com</p>
</footer>
</div>
</body>
</html>
Put both of your media queries at the bottom of your CSS code.
Put CSS code for #media only screen and (max-width: 1024px)
and then put CSS code for #media only screen and (max-width: 768px)
Order is important in CSS.
Related
I'm working on an assignment dealing with forms in HTML and CSS. I'm trying to follow the instructions but my form is coming out really wonky. Any suggestions on how I can fix this? I'd like to learn what I'm doing wrong.
body {
background-color: #B8DBED;
font-family: Arial;
}
header {
background-color: #000033;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399CC;
font-family: Georgia;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5C7FA3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
list-style-type: none;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #FFFFFF;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 204px;
background: #90C7E3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #FFFFFF;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(coast2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5C7FA3;
}
a:visited {
color: #344873;
}
a:hover {
color: #A52A2A;
}
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 64em) {
body {
background: #FFFFFF;
}
#wrapper {min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero{
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 37.5em) {
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
nav ul {
border: 2px solid #000000;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
label {
float: none;
text-align: left;
}
input[type="submit"] {
margin-left: 0;
}
}
form {
float: left;
display: block;
width: 120px;
padding-right: 200px;
text-align: right;
}
input, textarea {
display: block;
margin-bottom: 20px;
}
button {
margin-left: 130px;
}
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title>Pacific Trails Resort :: Reservations</Title>
<link rel="stylesheet" href="pacific.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Pacific Trails Resort </h1>
<meta name="description" content="Pacific Trails Resort reservations page.">
</header>
<nav>
<ul>
<li>Home</li> <li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<main>
<h2>Reservations at Pacific Trails</h2>
<h3>Contact Us Today!</h3>
<form name="reservations" method="post" action="http://webdevbasics.net/scripts/pacific.php">
<label for="myFName">First Name:</label>
<input type="text" name="myFName" id="myFName">
<label for="myLName">Last Name:</label>
<input type="text" name="myLName" id="myLName">
<label for="myEmail">Email:</label>
<input type="email" name="myEmail" id="myEmail" size="35">
<label for="myPhone">Phone Number:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="2" columns="30"></textarea>
<input type="submit" value="Submit">
</form>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
</body>
</html>
I've attached some images of how it's supposed to look. Any suggestions would help. Thanks
As #JSKIM mentioned in the comments, you just need to remove float: left from your <form> elements styling. With float: left, the text or inline elements will wrap around it. After removing float, the content after the form will appear underneath (or next) like it appears in the normal flow.
When you use float on an element, it's removed from the normal flow of the page.
body {
background-color: #B8DBED;
font-family: Arial;
}
header {
background-color: #000033;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399CC;
font-family: Georgia;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5C7FA3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
list-style-type: none;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #FFFFFF;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 204px;
background: #90C7E3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #FFFFFF;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(coast2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5C7FA3;
}
a:visited {
color: #344873;
}
a:hover {
color: #A52A2A;
}
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 64em) {
body {
background: #FFFFFF;
}
#wrapper {min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero{
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 37.5em) {
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
nav ul {
border: 2px solid #000000;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
label {
float: none;
text-align: left;
}
/*
input[type="submit"] {
margin-left: 0;
}*/
}
form {
margin: 1.5rem 0;
}
form label {
display: inline-block;
text-align: right;
width: 120px;
}
form div {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 1rem 0;
}
form input:not(input[class="submit"]), form textarea {
margin-left: .75rem;
}
form textarea {
resize: vertical;
width: 30ch;
max-width: 40ch;
}
.submit {
margin-left: 130px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title>Pacific Trails Resort :: Reservations</Title>
<link rel="stylesheet" href="pacific.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Pacific Trails Resort </h1>
<meta name="description" content="Pacific Trails Resort reservations page.">
</header>
<nav>
<ul>
<li>Home</li> <li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<main>
<h2>Reservations at Pacific Trails</h2>
<h3>Contact Us Today!</h3>
<form name="reservations" method="post" action="http://webdevbasics.net/scripts/pacific.php">
<div>
<label for="myFName">First Name:</label>
<input type="text" name="myFName" id="myFName">
</div>
<div>
<label for="myLName">Last Name:</label>
<input type="text" name="myLName" id="myLName">
</div>
<div>
<label for="myEmail">Email:</label>
<input type="email" name="myEmail" id="myEmail" size="30">
</div>
<div>
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
</div>
<div>
<label for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="2" columns="30"></textarea>
</div>
<input class="submit" type="submit" value="Submit">
</form>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
</body>
</html>
I'm doing an assignment in my class with HTML and CSS. I'm having trouble getting the navigation for phone and tablet views to look like the attached image. I'm assuming this could be resolved toward the bottom of the CSS code? Also, my page looks very wide compared to the photos in all views. I'm very much a novice at this if it isn't obvious.
body {
background-color: #b8dbed;
font-family: Arial;
}
header {
background-color: #000033;
color: #ffffff;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399cc;
font-family: Georgia;
text-shadow: 1px 1px 1px #cccccc;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5c7fa3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #ffffff;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 2048px;
background: #90c7e3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #ffffff;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(coast2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5c7fa3;
}
a:visited {
color: #344873;
}
a:hover {
color: #a52a2a;
}
header,
main,
nav,
footer,
figure,
figcaption,
aside,
section,
article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 64em) {
body {
background: #ffffff;
}
#wrapper {
min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero {
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 37.5em) {
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
<h1> Pacific Trails Resort </h1>
</header>
<nav>
<ul>
Home Yurts Activities Reservations
</ul>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p> <span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<br>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br> 12010 Pacific Trails Road <br> Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
Any help or guidance would be appreciated.
You were almost there. I found a few typos in your HTML code like the <header> not having an opening tag, along with semantic issues such as not using <li> elements in your unordered lists. After updating the HTML, all that was left was to provide a background color for the containers which hold the nav menu items at mobile and tablet viewport widths (ie the two media queries). I added a stock photo to the background-image for demonstration.
Lastly, updating your media queries to use px values instead of em. As #DCR mentioned, the em base value may change which in turn would cause your media queries to take affect at varying widths determined by the base value. Everything seems to match the desired output in the images you've included.
If you would like the page content to not exceed a certain viewport width, just specify max-width on the <body> and center it on the page with margin: 0 auto which creates 0 top/bottom margin and "auto" sized left/right margins to center the content. I also added a border and box-shadow to the body at "desktop size" so it matches your desired output.
body {
background-color: #b8dbed;
font-family: Arial;
max-width: 100ch; /* vary this */
margin: 0 auto 1rem auto;
border: .1rem solid #333;
box-shadow: 1px 2px 2px 0px #222;
}
header {
background-color: #000033;
color: #ffffff;
margin-left: auto;
margin-right: auto;
height: 120px;
padding-top: 30px;
padding-left: 3em;
text-align: center;
}
nav {
font-weight: bold;
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
}
nav ul {
list-style-type: none;
}
h1 {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 {
color: #3399cc;
font-family: Georgia;
text-shadow: 1px 1px 1px #cccccc;
}
h3 {
font-family: Georgia;
color: #000033;
}
dt {
color: #000033;
}
.resort {
color: #5c7fa3;
font-weight: bold;
}
nav ul {
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
main ul {
list-style-image: url(marker.gif);
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 20px;
margin-left: 190px;
background: #ffffff;
}
#contact {
font-size: 90%;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 2048px;
background: #90c7e3;
box-shadow: 3px 3px 3px #333333;
border: 1px solid #000033;
background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
background: #ffffff;
margin-left: 190px;
padding-left: 30px;
}
#homehero {
height: 300px;
background-image: url(https://www.visitcalifornia.com/sites/visitcalifornia.com/files/NC_DuncansCove_Seeff_1280x642_sized_downsized.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
* {
box-sizing: border-box;
}
a:link {
color: #5c7fa3;
}
a:visited {
color: #344873;
}
a:hover {
color: #a52a2a;
}
header,
main,
nav,
footer,
figure,
figcaption,
aside,
section,
article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 1024px) {
body {
background: #ffffff;
max-width: none;
border: none;
box-shadow: none;
}
#wrapper {
min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
background: rgba(213, 244, 250, .4);
}
nav li {
display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;
}
#homehero {
margin-left: 0;
height: 200px;
}
#yurthero {
margin-left: 0;
height: 200px;
}
#trailhero {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
#media only screen and (max-width: 600px) {
body {
box-shadow: none;
border: none;
}
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
background: rgba(213, 244, 250, .4);
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
#homehero {
background-image: none;
height: 0;
}
#yurthero {
background-image: none;
height: 0;
}
#trailhero {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
<header>
<h1> Pacific Trails Resort </h1>
</header>
<nav>
<ul>
<li>Home
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p> <span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<br>
<div id="contact">
<span class="resort">Pacific Trails Resort</span> <br> 12010 Pacific Trails Road <br> Zephyr, CA 95555 <br>
<br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a> <br>
<span id="desktop">888-555-5555</span>
<br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
e.sween12#gmail.com
</footer>
</div>
I am pretty new to coding and I am doing this for my online college class. For some reason, my footer is not going to the bottom. Neglect the navigation bar above.
I also need more words to post this so I'm going to keep adding word until it says I am fine. So yeah I keep talking and talking and talking well actually I'm typing and not talking so I'm typing typing typing until this post says I have enough words because this code is pretty big.
Here is my code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
What you should do is to provide height to the main class, provide how much height you need.
main{
height:800px; //just an example height.
}
Please find the code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main{
height:800px;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
You are using float:left in for left nav. That's why the height of that container is not being calculated and your footer showing in the middle.
Remove float:left, use display: inline-block for left nav and section with vertical-align:top. Avoid using fixed height in not necessary.
Below is the corrected code snippet.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
vertical-align:top;
width: 198px;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: inline-block;
vertical-align:top;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I have made an edit to your code and it works. the problem was tha you have used float for your elements and you did not make a "clearfix" element for them.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
margin-top: 20px;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
.clearfix {
clear: both;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I have this list:
How can I make the list be in line with the top bar, ie. the total width of the list will be 960px just like the top bar?
I don't understand why it isn't working. The size of each of the squares is 159px + 1px for margin, and yet they make a profit from the right that I didn't define.
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2TheGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo_bg">2Tg</div>
</header>
<article id="games">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</article>
</div>
</body>
</html>
Try this
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.