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>
Related
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>
Good day, somehow my check box and the text that needs to be beside it do not align in the same row. I have the code on JS Fiddle.
https://jsfiddle.net/6ejwdg9v/
The checkbox code is:
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
the classes form-group and checkbox are not touched with custom css code which is why I wonder how are they affected.
EDIT: I added the code in the "duplicate of another question" it did not do anything I still need help
changed class for .checkbox added
vertical-align: middle;
width: 20px;
also added
input[type=checkbox] {
width: 20px;
}
#font-face {
font-family: 'brandon_reg';
src: url('../fonts/brandon-grotesque-light.otf');
}
#font-face {
font-family: 'brandon_med';
src: url('../fonts/brandon-grotesque-medium.otf');
}
#font-face {
font-family: 'brandon_black';
src: url('../fonts/brandon-grotesque-black.otf');
}
html {
font-size: 100%;
}
body {
margin: 0 auto;
display: block;
/*REGISTER BACKGROUND*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*REGISTER BACKGROUND*/
}
.regular_bg {
font-family: 'brandon_reg';
}
.med_bg {
font-family: 'brandon_med';
}
.sml_padding {
margin: -10;
padding: -10;
}
.thick_bg {
font-family: 'brandon_black';
}
.thick_bg2 {
font-size: 35px;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}
.full_width {
height: auto;
width:100%;
}
.ul_login {
color: #00a6a6;
}
.ul_reg {
color: #f08300;
}
.justify_text {
transform: translateT(-50);
text-align: justify;
padding: 2%;
display: flex;
justify-content: center;
align-items: center;
}
/*
.row_center {
display: flex;
}
.row_center>* {
flex: 1;
}
*/
.center-block {
margin-left:auto;
margin-right:auto;
display:block;
}
.icon_text_padding {
padding-bottom: 20px;
align-items: center;
margin: 0 auto;
}
.fab {
padding: 20px;
font-size: 50px;
color: #FFF;
}
.fab:hover {
color: #c9c9c9;
text-decoration: none;
}
/*IMPORTANT CSS FOR HEADER*/
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
.list1 {
float: left;
font-size: 200%;
}
.list2 {
float: right;
font-size: 200%;
}
.list2 li a:hover {
color: #fff;
}
/*
.lines {
position: relative;
padding: 10px 0;
}
.lines:before {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
top: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines:after {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
bottom: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines_med:before {
width: 24%;
}
.lines_med:after {
width: 24%;
}
.lines_med2:before {
width: 27%;
}
.lines_med2:after {
width: 27%;
}
.lines_long:before {
width: 38%;
}
.lines_long:after {
width: 38%;
}
*/
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 5s;
}
nav ul {
float: left;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #262626;
padding: 5px 20px;
text-decoration: none;
transition: .5s;
}
nav ul li a:hover {
color: #fff;
background: #00a6a6;
text-decoration: none;
}
footer {
width: 100%;
background-color: #00a6a6;
padding: 3%;
color: #FFF;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
filter:none !important;
}
.container-fluid {
max-width: 1200px;
}
footer .container-fluid {
max-width: 100%;
}
.footer_links a h4 {
color: #fff;
}
.footer_links a:hover {
color: #fff;
text-decoration: underline;
}
.faq a:hover {
text-decoration: none !important;
}
.info_container {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.info_box h2 {
text-align: center;
}
.info_header {
padding-top: 4%;
padding-bottom: 4%;
}
.bottom_padding {
padding-bottom: 4%;
}
.info_font {
font-size: 18px;
}
.mv_font {
font-size: 20px;
text-align: left;
}
.contact_font {
font-size: 20px;
text-align: center;
}
.center_font {
margin: 0 auto;
text-align: center;
}
#icon {
max-width: 90%;
}
#media (max-width: 600px){
#icon {
max-width: 150px;
}
h4 {
font-size: 1.7em;
}
}
/*CONTACT PAGE*/
.text_field_design {
padding: 50px 0 80px;
text-align: center;
}
.text_field_design p {
padding-bottom: 80px;
color: #737373;
}
.text_field_design h2 {
color: #4c4c4c;
margin: 20px 0 20px;
}
.text_field_design .input-group {
margin-bottom: 25px;
}
.input-group-addon {
padding: -50px !important;
font-size: 20px;
}
.text_field_design .form-control {
border-radius: 0 !important;
}
.text_field_design span {
border-radius: 0 !important;
}
.text_field_design .btn {
border-radius: 0;
width: 100%;
font-size: 15px;
background-color: #f08300;
color: #fff;
}
.text_field_design .btn:hover {
background-color: #f3a64c;
color: #fff !important;
}
.box_shadow {
box-shadow: 10px 10px 5px grey;
}
.curved_img {
border-radius: 10px;
}
/*REGISTER*/
.reg_box {
width: 90%;
padding: 70px 70px 10px;
background: #fff;
top: 50%;
left: 50%;
margin: 0 auto;
opacity: 0.9;
border-radius: 30px;
}
.reg_box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.reg_box input {
width: 100%;
margin-bottom: 20px;
}
.reg_box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
height: 40px;
}
.reg_box input[class="reg_signup"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #f08300;
color: #fff;
font-size: 18px;
margin-top: 20px;
}
.reg_box input[class="reg_fb"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #3b579d;
color: #fff;
font-size: 18px;
}
.reg_box input[class="reg_google"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #2eaa52;
color: #fff;
font-size: 18px;
}
.checkbox {
float: left !important;
display: block;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
vertical-align:middle;
}
/*
.register_form {
text-align: center;
margin: 100px 400px;
}
.registration {
width: 100%;
background-color: #fff;
opacity: 0.9;
padding: 50px 0px;
}
.align_left_reg {
text-align: left;
font-size: 18px;
}
#text_field {
width: 250px;
border-radius: 5px;
padding: 5px;
}
#phone {
width: 250px;
padding: 5px;
border-radius: 5px;
outline: 0px;
}
#rd {
font-family: 'brandon_med';
}
.button_container {
max-width: 60%;
}
.ref_button {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #f08300;
color: #fff;
}
.fb_button {
width: 200px;
height: 40px;
font-size: 18px;
background-color: #3b579d;
color: #fff;
}
.fb_button:hover {
background-color: #3662d0;
}
.ref_button:hover {
background-color: #f3a64c;
color: #fff !important;
}
element.style {
color: white;
}
REGISTER*/
input[type=checkbox] {
width: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My White Card</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="background-color:#000;" class="regular_bg">
<br><br>
<div class="reg_box">
<div class="row">
<div class="col-md-6">
<input type="submit" value="Sign Up With Facebook" class="reg_fb"></i>
</div>
<div class="col-md-6">
<input type="submit" value="Sign Up With Google" class="reg_google"></i>
</div>
</div>
<br>
<form>
<div class="row">
<div class="col-md-6 col-sm-12">
<p>First Name</p>
<input type="text" placeholder="First Name">
<p>Email</p>
<input type="text" placeholder="Email">
<p>Password</p>
<input type="password" placeholder="Password">
</div>
<div class="col-md-6 col-sm-12">
<p>Last Name</p>
<input type="text" placeholder="Last Name">
<p>Number</p>
<input type="text" placeholder="Number">
<p>Retype Password</p>
<input type="password" placeholder="Retype Password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
<input type="submit" value="Sign Up" class="reg_signup">
</div>
</form>
</div>
</body>
</html>
Turning the label into a flexbox will give you vertical alignment.
.checkbox label {
display: flex;
align-items: center; /* Vertical alignment */
}
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
just such a problem – my contact page has a view bug when in the mobile view – the footer is aroused almost all over the screen and the contact form is on itsee screenshot, I marked the div that obviously causes problems . Checked all the HTML tags – they're OK, tried position of the objects in the CSS – nothing helps. In the desktop view everything looks OKsee screenshot. Here is the HTML document and a CSS file linked there. They are better to copy to an editor to run in a browser.
a {
color: #f91111;
}
a:hover {
color: #fff;
background: #f91111;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
font-size: 97%;
line-height: 1.4em;
min-width: 500px;
font-family: Helvetica;
letter-spacing: 101%;
min-height: 100%;
}
header {
margin-bottom: 1%;
background-image: url(../images/DSC00075.JPG);
background-position: 0% 7%;
background-size: 100%;
background-opacity: 0.9;
background-color: #f91111;
padding: 1% 0 0%;
position: fixed;
z-index: 10;
width: 100%;
}
.header {
max-width: 1310px;
margin: 0 auto;
}
.collapse {
display: none;
}
.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
border-top: 1px solid #ddd;
}
main {
margin: 0 auto;
/* padding: 10% 15% 2.9%; */
font-size: 94%;
max-width: 1310px;
padding-top: 200px !important;
min-height: calc(74.75vh);
}
nav {
max-width: 750px;
text-align: left;
padding-bottom: 0.85em;
padding-left: 0.35em;
}
nav a {
display: inline;
text-align: left;
text-decoration: none;
padding: 2%;
margin-right: 4.8%;
border-radius: 5px;
color: #fff;
line-height: 1em;
}
nav a:hover {
background-color: #fff;
color: #000;
}
a.active {
background-color: #fff;
color: #000;
}
.footer {
font-size: 0.75rem;
padding: 1.5% 15% 1.25% 14.4%;
color: #fff;
}
h1 {
font-size: 4rem;
padding-bottom: 1rem;
padding-left: 0.8%;
color: #fff;
}
h2 {
font-size: 2.5em;
color: #f91111;
margin-bottom: 2.5rem;
line-height: 1.25em;
}
h3 {
font-size: 1.3em;
color: #f91111;
padding: 0.25% 0%;
}
h3.lebenslauf {
background: #f91111;
color: #fff;
padding: 0.25% 0% 0.25% 1%;
}
.hr4 .lightborder {
display: block;
width: 93%;
border-bottom: 1px solid #e8e8e8;
position: relative;
z-index: 1;
}
span.ul-second-line {
/*padding-left: 10px;*/
margin-left: 7px;
}
ul.Lebenslauf {
padding-left: 16px;
margin-top: 0px;
}
p.no-margin-before {
-webkit-margin-before: 0;
}
div.button {
display: inline;
font-size: 0.75rem;
padding: 5px;
margin-right: 10px;
min-width: 15%;
}
div.table-row {
max-width: 100%;
display: block;
margin-bottom: 0.75rem;
padding-left: 1px;
font-size: 0.95em;
}
div.left {
float: left;
width: 20%;
min-width: 150px;
display: inline;
}
div.right {
width: 75%;
display: inline-block;
}
.empty-bottom {
height: auto;
}
a.up-there {
text-decoration: none;
padding: 3px 5px;
}
div.kategorie a.up-there {
margin-right: -9px;
}
div.kategorie a.up-there:hover {
margin-right: 0px;
}
.collapse {
display: none;
}
strong.red-accentuation {
color: #f91111;
}
footer {
max-width: 100%;
background-color: #f91111;
padding: 0 2%;
vertical-align: bottom;
}
footer a {
color: white;
text-decoration: none;
margin-bottom: 0;
}
footer a:hover {
text-decoration: underline;
}
#image {
text-align: center;
width: auto;
border: none;
margin: 0 auto;
margin-bottom: 10px;
background-color: none;
font-size: 100%;
background-image: url('');
}
.empty-space {
text-align: right;
}
#image-alternative {
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.preview {
width: 10%;
margin-left: 10px;
border: 3px solid #f91111;
border-radius: 5px;
height: 15%;
}
.container {
max-width: 95%;
margin: 3% auto;
margin-left: 0;
padding: 10px;
padding-left: 0;
background-color: none;
overflow: hidden;
box-shadow: none;
}
.gallery ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
.gallery li {
display: inline;
width: 50%;
height: 30vh;
margin: 2%;
margin-left: 0;
position: relative;
font-size: 0;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.fade.in {
opacity: 1;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.referenz-link {
border: solid 1px #f91111;
border-radius: 10px;
width: 200px;
height: 200px;
margin-right: 30px;
margin-bottom: 30px;
overflow: hidden;
display: inline-block;
background: #f91111;
}
.referenz-link:last-child {
margin-right: 0px;
}
.referenz-link:hover {
background: none;
}
.picture-keeper {
overflow: hidden;
height: 133px;
margin-bottom: 10px;
border-bottom: solid 1px #f91111;
background: #fff;
}
img.reference {
width: 100%;
}
.notation {
padding: 0px 10px 15px;
text-align: center;
}
.referenz-link a {
color: #fff;
text-decoration: none;
font-weight: 700;
}
.referenz-link a:hover {
color: #f91111;
background: #fff;
}
h1.header {
display: inline-block;
}
img.presentation {
display: block;
margin-left: -1em;
}
h2.with-picture {
display: inline-block;
}
.foto-presentation {
text-align: center;
margin-bottom: 2.5em;
}
.adress-left {
display: inline-block;
float: left;
width: 48%;
margin-right: 2%;
}
.form-right {
display: inline-block;
width: 48%;
float: right;
}
dd,
dt {
display: inline-block;
}
dd {
margin-left: 0;
}
dt {
width: 7em;
}
dl {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
address {
font-style: normal;
}
label.kontaktangabe {
width: 8em;
display: inline-block;
}
textarea,
input[type="text"] {
border: solid 1px #f91111;
border-radius: 3px;
padding: 4px;
line-height: 1.5em !important;
}
textarea {
font: 400 0.95em Arial;
}
div#nachricht label {
vertical-align: top;
}
button.buttons {
color: #fff;
background: #f91111;
border: none;
border-radius: 3px;
font-size: 14px;
padding: 7px;
}
button.buttons:hover {
background: #a60c0c;
}
#kontaktdaten div.table-row {
font-size: 1em;
}
#kontaktdaten form {
padding-top: 1em;
}
#media screen and (min-width: 500px) and (max-width: 790px) {
header {
background-position: 0% 10%;
background-size: 100%;
padding: 1% 1% 1%;
margin: 0;
}
h1 {
font-size: 3rem;
}
nav a {
padding: 1.5%;
margin-right: 1%;
border-radius: 2px;
}
nav {
align: left;
padding-bottom: 0.1rem;
}
main {
margin: 0% 1%;
padding: 1%;
}
div.left {
margin-right: 1rem;
min-width: none;
}
.referenz-link {
width: 200px;
height: 200px;
margin-right: 45px;
margin-bottom: 45px;
}
.referenz-link:last-child {
margin-right: 0px;
}
.picture-keeper {
height: 133px;
}
.notation {
font-size: 1em;
}
.adress-left {
display: block;
width: 95%;
margin-bottom: 2em;
}
.form-right {
display: block;
width: 95%;
float: left;
}
label.kontaktangabe {
display: block;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 450px;
font-size: 0.9rem;
padding: 0%;
}
header {
padding: 0% 1% 1%;
margin: 0;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
font-size: 2rem;
}
nav {
max-width: 480px;
align: left;
padding-bottom: 0.6em;
}
nav a {
display: block;
text-align: left;
text-decoration: none;
padding: 1.5%;
margin: 0.5% 0%;
border-radius: 2px;
max-width: 30%;
}
main {
margin: 0% 0% 0% 1;
padding: 1% 0% 1% 1%;
max-width: 450px;
font-size: 100%;
}
div.left {
width: 100%;
float: none;
display: block;
min-width: 0;
}
div.right {
max-width: 100%;
display: block;
}
.hr4 .lightborder {
display: block;
max-width: 100%;
}
div.button {
display: block;
max-width: 50%;
text-align: center;
margin: 0 auto;
}
footer {
max-width: 480px !important;
}
.container {
padding: 0%;
}
img.preview {
margin-left: 0%;
margin-right: 2%;
}
.footer {
padding: 1.5% 0%;
max-width: 450px;
}
.referenz-link {
margin-right: 45px;
margin-bottom: 45px;
}
.notation {
font-size: 1.25em;
}
.adress-left {
display: block;
width: 95%;
margin-bottom: 2em;
}
.form-right {
display: block;
width: 95%;
float: left;
}
label.kontaktangabe {
display: block;
}
textarea.contact-form {
width: 379px;
}
dd,
dt {
display: block;
}
dd {
margin-bottom: 1em;
}
span.left {
font-weight: 700;
}
.kategorie .table-row {
margin-bottom: 2rem;
}
div#werdegang .table-row {
margin-bottom: 1em;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Peter Schachnowskij – Homepage</title>
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<header>
<div class="header">
<h1>Peter Schachnowskij</h1>
<nav>
Startseite
Lebenslauf
Referenzen
Zeugnisse
<a class="active">Kontakt</a>
</nav>
</div>
</header>
<main>
<p> </p>
<h2>Kontakt</h2>
<div class="table-row" id="kontaktdaten">
<div class="adress-left">
<h3>Peter Schachnowskij</h3>
<p><address>Richterstraße 9<br>
70567 Stuttgart</address></p>
<p>
<dl><dt>Tel.:</dt>
<dd>01 76 / 21 75 17 11</dd>
</dl>
<dt>E-Mail: </dt>
<dd>peter.schachnowskij.gf#gmail.com</dd>
<p>
<p>
<dl><dt>Homepage:</dt>
<dd>noch im Aufbau</dd>
</dl>
<dl><dt>XING-Profil:</dt>
<dd>https://www.xing.com/profile/Peter_Schachnowskij</dd>
</dl>
</p>
</div>
<div class="form-right">
<h3>Haben Sie ein Anliegen?</h3>
<p>Schreiben Sie mir gerne!</p>
<form action="mailto:peter.schachnowskij.gf#gmail.com" method="post">
<div class="table-row"><label class="kontaktangabe" for="name">Ihr Name*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="vorname">Ihr Vorname*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="e-mail">Ihre E-Mail*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="telefon">Ihr Telefon: </label><input type="text" value size="50" aria-required="false" aria-invalid="false" /></div>
<div class="table-row" id="nachricht"><label class="kontaktangabe" for="nachricht">Ihre Nachricht: </label><textarea name="your-message" cols="52" rows="12" class="contact-form" aria-invalid="false"></textarea></div>
<div class="table-row"><label class="kontaktangabe" for="absenden"> </label><button class="buttons" type="submit" name="action" id="absenden">Absenden</button></div>
</form>
<div class="empty-bottom"> </div>
</div>
</div>
</main>
<div class="empty-bottom"> </div>
<footer>
<div class="footer">
<div class="button">Peter Schachnowskij </div>
<div class="button">Richterstr. 9 </div>
<div class="button">70567 Stuttgart </div>
<div class="button">
<nobr>Tel.: 01 76 / 21 75 17 11</nobr>
</div>
<div class="button">
<nobr>E-Mail: peter.schachnowskij.gf#gmail.com</nobr>
</div>
</div>
</footer>
</body>
</html>
Can someone please help me? Thanx in previous.
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.
So I know that there are other results here that are for this question, however I have a relatively "finished" code which I don't want to mess with too much if I can avoid it.
Basically I have everything on my website looking just the way I want it to, except that on larger displays the footer doesn't stick to the bottom of the screen, and there is this big ugly gap between my footer and the bottom of the screen.
Below are my index and css files. The footer element has been jostled around between the end tags, to no effect. I had it outside of my main body of content and tried bottom: 0; with position: absolute; and it just caused the right end of the footer to shoot off outside of the width I specified in my container.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
You could try using css-tables. I tested it and seems to work as requested. The footer also expands if you add content to it.
Under body add
margin:auto;
display:table;
and under footer
display:table-row;
position:fixed;
width:1000px;
bottom: 0;
Also in this case you should probably remove the margin from the #container as it is defined in the body already.
Where I learned the trick: http://colintoh.com/blog/display-table-anti-hero#sticky-footer
I added 1 more div to target all the body content except footer so I can set the height for that element. Here are code that works:
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">`enter code here`
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html, body, #container {
height: 100%;
margin: 0;
}
footer {
margin-top: 50px;
background-color: #006400;
margin-bottom: 0px;
bottom: 0;
}
nav, h1, h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos{
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
.bodyContetExceptFooter{
padding: 20px;
min-height: 90%;
margin: 0 auto -50px;
}
</style>
</head>
<body>
<div id="container">
<div class="bodyContetExceptFooter">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<div id="navBar">
<nav>
Home
Music
Photos
Poetry
About
</nav>
</div>
<div id="divContent">
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3> <br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
</html>
Use relative positioning on body, absolute positioning on footer and position it to left: 0; bottom 0;, also add width: 100%; to footer to fill full width of body.
One last thing is to add padding-bottom: 23px; to body to avoid footer hiding content when the height of browser is less than your content.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
position: relative; /* added */
padding-bottom: 23px; /* added, where 23px is the height of the footer */
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute; /* added */
bottom: 0; /* added */
left: 0; /* added */
width: 100%; /* added */
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute;
bottom: 0px;
width: 100%;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<!DOCTYPE html>
<head>
<title>Home - The Singular Effect</title>
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" hreF="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>