Text isn't minimizing with screen HTML/CSS

Text isn't minimizing with screen HTML/CSS - html

I hope someone can help! When I minimize the browser screen on this code, everything is minimizing appropriately except for my body text. Not sure why this is happening! Can anybody find the issue in the HTML or CSS?
The HTML:
<!DOCTYPE html>
<!--
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>History: Skating Today</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="" name="description">
<meta content="" name="keywords">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="js/skel.min.js">
</script>
<script src="js/skel-panels.min.js">
</script>
<script src="js/init.js">
</script> <noscript>
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.header {
}
</style></noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="page">
<!-- Header -->
<div id="page">
<img alt="Black and white photo of boy skateboarding" height="" src=
"images/OldTimey.jpg" width="100%">
<div class="unit header">
<section>
<header>
<h3>Unit 1: Skateboarding, Then and Now<br>
Lesson 1/3</h3>
</header>
</section>
</div><!-- Main -->
<div class="container" id="main">
<div class="row">
<div class="3u">
<section class="sidebar">
<h4>Home</h4>
</section>
<section class="sidebar">
<h4><a href="Programme%20Overview.html">Programme
Overview</a></h4>
</section>
<section class="sidebar">
<h4><a href="Unit1.html">Unit 1: Skateboarding, Then
and Now</a></h4>
<ul class="style3">
<li><a href="History.html">Lesson 1: History of
Skateboarding</a></li>
<li><a href="Types.html">Lesson 2: Types of
Skating</a></li>
<li>Unit 1 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4><a href="Unit2.html">Unit 2: Why You Should
Skate</a></h4>
<ul class="style3">
<li><a href="EmotionalBenefits.html">Lesson 1:
Emotional and Physical Benefits</a></li>
<li><a href="SocialBenefits.html">Lesson 2: Social
and Enviromental Benefits (Plus a Few
More!)</a></li>
<li>Unit 2 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4>Unit 3: Safety & Upkeep</h4>
<ul class="style3">
<li><a href="SafePlace.html">Lesson 1: Determining Safe Places
to Skate</a></li>
<li><a href="Stopping.html">Lesson 2: How to Stop a
Board</a></li>
<li><a href="Rules.html">Lesson 3: Rules of the
Road</a></li>
<li>Lesson 4: Changing Your Bearings</li>
<li>Lesson 5: Adjusting Your Trucks</li>
</ul>
</section>
<section class="sidebar">
<h4>Extras: Skating Routes & Meet a Skater</h4>
<ul class="style3">
<li>From the Flag Poles</li>
<li>From the White Gates</li>
<li>From the Pavilion</li>
<li>Meet a Skater</li>
</ul>
</section>
</div>
<div class= "9u skel-cell-important"">
<header>
<h3>Skating Today</h3>
</header>
<p> While some people may still see skaters as
rebellious or alternative, skateboarding has once
again evolved. In places like Afghanistan, where
girls are not allowed to ride bikes but can
skateboard, the sport is used to engage and empower
youth (skateistan.org). Furthermore, although many
skaters still take part in skateboarding to perfect
tricks and take risks, skateboarding has become the
way that many people get from point A to point B.</p>
<p></p>
<p>While any type of skateboard may be used for
transportation, the longboard is having its heyday.
A longboard can range anywhere from 33 to 80 inches
and typically has softer wheels, making for a
smoother and more stable ride, perfect for
cruising, less experienced, and older skaters
(Ruibal 2006).</p>
<img src="images/header.jpg" width="736" height="189" alt=""/><br>
<div id="course description">
<br>
<p>This lesson is now complete. To continue to lesson 2, "Types of Skating", click <a href=
"Types.html">next</a>.</p>
</div>
</div>
</section>
</div><!-- Main -->
</div>
</div>
</div>
</body>
</html>
And the CSS:
#charset "UTF-8";
/*
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body {
background-image: url(../images/BackgroundImage.jpg);
}
body,input,textarea,select {
font-family: Verdana,Geneva,sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.5em;
}
h1,h2,h3,h4,h5,h6 {
letter-spacing: 1px;
font-weight: 300;
color: #1b1b5e;
}
h4
{
letter-spacing: 1px;
font-weight: 700;
color: #1b1b5e;
}
/* Change this to whatever font weight/color pairing is most suitable */
strong,b {
font-weight: 700;
color: #000;
}
em,i {
font-style: italic;
}
/* Don't forget to set this to something that matches the design */
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sub {
position: relative;
top: .5em;
font-size: .8em;
}
sup {
position: relative;
top: -.5em;
font-size: .8em;
}
hr {
border: 0;
border-top: solid 1px #ddd;
}
blockquote {
border-left: solid .5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
p,ul,ol,dl,table {
margin-right: ;
margin-bottom: 1em;
color: #1b1b5e;
}
tr. highlight td {
padding: 2em;
}
header {
margin-bottom: .5em;
line-height: 2.5em;
color: #1b1b5e;
}
header h2 {
font-size: 24px;
text-align: left;
}
header h3 {
font-size: 22px;
}
footer {
margin-top: 1em;
}
/* Sections/Articles */
section,article {
margin-bottom: 1em;
}
.row
{
padding: 0;
position; center;
}
.intro {
text-align: left;
padding-bottom: 2em;
font-weight: 700;
}
.aims {
padding-top: 2px;
}
.unit header {
text-align: right;
margin-right: 1em;
color: purple;
}
table,th,td {
border: ;
border-collapse: collapse;
align-content: center;
}
th,td {
padding: 5px;
}
.boxed {
border: 1px solid #000;
padding: 2%;
margin-right: 10%;
margin-bottom: 2em;
}
* {
margin: 0;
padding: 0;
outline: none;
}
.formativequiz {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background: ;
text-align: left;
}
.formativequiz h1 {
font: bold;
}
.formativequiz p {
font: bold;
}
.question {
overflow: auto;
margin: ;
width: 80%;
background: #fff;
}
.question h2 {
float: left;
margin: 0 40px;
color: blue;
font: bold;
}
.question h2:hover {
color: #333;
cursor: pointer;
}
.question p {
float: left;
margin-right: 0;
color: #fff;
font: bold 0;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
h2:active ~ .yes {
color: #1b1b5e;
font-size: ;
}
.course description {
margin-bottom: 3em;
padding-right: 10%;
}
#icons {
height: 128;
text-align: justify;
border: none;
font-size: .1px;
/* IE 9 & 10 don't like font-size: 0; */
max-width: 888px;
}
#icons div {
display: inline-block;
margin-top: 3em;
margin-bottom: 3em;
padding-right: 10%;
}
#icons:after {
content: '';
width: 100%;
/* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
/* Images */
.image {
display: block;
margin: 2em;
}
.image img {
display: block ;
width: ;
margin: 2em;
padding: 2em;
}
.image.featured {
display: block;
width: 100%;
margin: 0;
}
.image.full {
display: block;
width: 100%;
margin-bottom: 2em;
}
.image.left {
float: left;
margin: 0 2em .8em 0;
}
.image.centered {
display: block;
margin: 0 0 .8em;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default {
margin-bottom: 0;
padding-bottom: 0;
list-style: none;
}
ul.default li {
display: block;
padding: 2em 0 1.25em;
border-top: 1px solid #303030;
}
ul.default li:first-child {
padding-top: 0;
border-top: none;
}
ul.default a {
text-decoration: none;
color: rgba(255,255,255,.5);
}
ul.default a:hover {
}
ul.style1 {
margin: 0;
padding: 0;
list-style: none;
}
ul.style1 li {
padding: .6em 0;
}
ul.style1 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style1 img {
}
ul.style2 {
text-align: left;
margin-right: 10%;
padding: 2%;
list-style: disc;
padding-bottom: 1em;
}
ul.style2 li {
padding: .5em 0 0;
list-style-position: inside;
}
ul.style2 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style3 {
margin: 0;
padding: 5px;
list-style: none;
font: 14px;
}
ul.style3 li {
padding-left: .6em;
line-height: 150%;
}
ul.style3 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style5 {
overflow: hidden;
margin: 0 0 1em;
padding: 0;
list-style: none;
}
ul.style5 li {
float: left;
padding: .25em;
line-height: 0;
}
ul.style5 a {
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page {
margin: 7em;
position: center;
background: #fff;
}
#main {
padding: 1em;
}
#container {
position: center;
margin: 1em;
padding: 1em;
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.greenleaf {
align-content: relative;
}
.trafficlight {
align-content: relative;
}
.pinkskater {
}
.map {
}

Add media queries to your CSS to define you font sizes for various window sizes. Here's a simple example from this post (written in Sass):
html {
font-size: 16px;
#media (min-width: 800px) {
font-size: 18px;
}
#media (min-width: 1200px) {
font-size: 20px;
}
}

The problem appears to be that in your css you set the font size of body in pixels. try changing it to em instead of px and it should adjust in size. But it's hard to tell with so much going on.

Related

Why is there white space at the bottom of my web page when run in the browser?

When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot

Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}

My website is responsive but it doesnt react at the right sizes

So i made a responsive website but the website doesnt change when it should.
The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.
And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1
the CSS code
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
margin-left: auto;
margin-right: auto;
}
header {
padding-bottom: 1px;
}
footer {
text-align: center;
}
.logo {
border-radius: 10px;
height: 100px;
margin-top: 15px;
margin-bottom: 5px;
width: 178px;
margin-left: auto;
margin-right: auto;
display: block;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.style-nav ul {
list-style-type: none;
text-align: center;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.style-nav ul li a:hover {
color: black;
text-shadow: 2px 2px 10px #000000;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.hero {
background-image: url(../Images/Background.jpg);
background-size: cover;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
color: #FFFFFF;
text-align: center;
}
.infobox-tan {
background-color: #C29D73;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.infobox-grey {
background-color: #717A84;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
color: #FFFFFF;
text-align: center;
}
h1.small {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h2 {
font-size: 25px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 20px;
padding: 30px
}
h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 35px;
}
p {
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-bottom: 60px;
}
p.footertext {
color: gray;
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-top: 20px;
margin-bottom: 20px;
}
.button {
border-radius: 30px;
border: 2px #FFFFFF solid;
padding: 8px 15px;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 30px;
}
.button:hover {
color: #242424;
border: 2px #242424 solid;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.row:after {
clear: both;
}
.col {
width: 100%;
}
/*Tablet View*/
#media (min-width: 700px) {
.style-logo {
float: center;
}
body {
max-width: 778px;
}
.style-nav ul li {
display: inline-block;
}
h1.normal {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
.row:before,
.row:after {
content: "";
display: table;
padding: 5px;
color: #FFFFFF;
text-align: center;
}
.col-tablet {
width: 50%;
}
.col {
float: left;
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
}
/*Desktop View*/
#media (min-width: 1024px) {
.style-logo {
float: center;
}
.style-nav {
float: center;
}
.col-desktop {
width: 25%;
}
body {
max-width: 1200px;
}
}
<!doctype html>
<html>
<head>
<link href="CSS/Styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="logo" src="Images/Logo company.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Education</li>
<li>Photos</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<div class="hero">
<h3>Editor's Choice</h3>
<h4>Maarten Nauta</h4>
<h1 class="normal small">Webdesign</h1>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet">
<div class="infobox-tan">
<h2>Education</h2>
<p>And a summary of my achievements</p>
Read More
</div>
</div>
<div class="col col-tablet">
<div class="infobox-grey">
<h2>Services</h2>
<p>Graphic/Web design - Video/Photo editing</p>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
</div>
</main>
<footer>
<div class="row">
<div class="col">
<p class="footertext">©2018 Maarten Nauta</p>
</div>
</div>
</footer>
</body>
</html>

Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
With this tag your media queries will operate as though the screen is the standard 72 ppi.

You are missing the viewport meta tag
(...) Apple introduced the "viewport meta tag" in Safari iOS to let
web developers control the viewport's size and scale. Many other
mobile browsers now support this tag, although it is not part of any
web standard. Apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to
figure out exactly how to implement it in Fennec. For example,
Safari's documentation says the content is a "comma-delimited list,"
but existing browsers and web pages use any mix of commas, semicolons,
and spaces as separators.
<meta name="viewport" content="width=device-width, initial-scale=1">

Logo Upload working in brackets but not live through CyberDuck

I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke

I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>

The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.

divs/footer ignoring other divs existence

I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.

Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen

Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>

remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100

IE: Divs move when window is resized too small

I'm almost finished with this site, and am just now trying to make it cross-browser. It works wonderfully in everything but IE6. I've fixed two of the problems it had, but am lost on the last one. The left sidebar moves right when the window is re-sized to something around 800px. The more you re-size, the more it moves, eventually covering up the content. This also seems to affect the header by shrinking it. The header is a small problem, but mostly just an annoyance.
I've tried a few fixes, but that did nothing. The only thread I could find that relates to this mentions that jQuery may be affecting it, but I have no jQuery set on that div. I'd appreciate any help that is given, as my deadline is approaching.
My HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
Home<br />
<a href="archives.html/" id="none" >Archives</a><br />
About Us<br />
Submit Your Work<br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li>Valentina Cano</li>
<li>Ricky Garni</li>
<li>Kyle Hemmings</li>
<li>Paulus Kapteyn</li>
<li>Tammy Ho Lai-Ming</li>
<li>Laura LeHew</li>
<li>Rhonda Maness</li>
<li>Anita McQueen</li>
<li>Rodney Nelson</li>
<li>Lise Phillips</li>
<li>Changming Yuan</li>
<li>Desmond Kon Zhicheng-Mingdé</li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li>Leila Fortier</li>
<li>Tammy Ho Lai-Ming</li>
<li>Allicia Strickland</li>
<li>Jump Study Photography</li>
<li>Thomas Zimmerman</li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li>March 2011</li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
My CSS:
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }

Simple; dump support for IE 6. Youtube and many other popular sites no longer support it, even Microsoft have abandoned it -- http://ie6countdown.com/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Text isn't minimizing with screen HTML/CSS - html

Add media queries to your CSS to define you font sizes for various window sizes. Here's a simple example from this post (written in Sass): html { font-size: 16px; #media (min-width: 800px) { font-size: 18px; } #media (min-width: 1200px) { font-size: 20px; } }

The problem appears to be that in your css you set the font size of body in pixels. try changing it to em instead of px and it should adjust in size. But it's hard to tell with so much going on.

Related

Why is there white space at the bottom of my web page when run in the browser?

My website is responsive but it doesnt react at the right sizes

Logo Upload working in brackets but not live through CyberDuck

divs/footer ignoring other divs existence

IE: Divs move when window is resized too small

Categories

Resources