Using VH and having spacing issues

DarkxPunk · January 30, 2016

Hi there,

To get started my code:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<base href="">
		<title>Razno Renovations</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default4.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<div class="split left half">
				<a class="logo">
					<span class="centerHack"></span>
					<span class="logotype">Razno Renovations</span>
				</a>
			</div><div class="split right half">
				<nav>
					<ul>
						<li><a href="">Who We Are</a></li>
						<li><a href="">Services</a></li>
						<li><a href="">Get Started</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<div class="pageWrap">
			<section id="services" class="first">
				<div class="content">
					<h2>Building with you the home you want to live in</h2>
					<p>If you are looking to renovate your house and receive a sturdy renovation job, we at Razno Renovations are here for you. We work with the house you currently have and transform it into your very own dream home. We have been working for many years to provide quality service to homeowners everywhere. To suit your needs we offer unique service for every part of your home, from basement to bedroom, floor to ceiling. You have our guarantee and trust that when you call us, you will receive our best service every time.</p>
					<h2>What we offer</h2>
					<ul class="serviceList">
						<li><span id="flooringTmb"></span>Flooring</li>
						<li><span id="electricalTmb"></span>Electrical</li>
						<li><span id="drywallTmb"></span>Drywalling</li>
						<li><span id="basementTmb"></span>Basement Finishing</li>
						<li><span id="deckFenceTmb"></span>Deck & Fence</li>
						<li><span id="windowDoorTmb"></span>Window & Door Installation</li>
					</ul>
			</div>
			<div class="background"></div>
			</section>
			<section id="flooring">
				<div class="content">
					<h2>Flooring</h2>
					<p>Does your newly purachased home have unfavourable carpeting that you would like to replace with smooth, hardwood flooring? Has the cracked tiling of your kitchen come off from its foundation? These and other carpentry jobs are the kinds we at Razno Renovations are known for.<br /> 
		We offer renovations in many types of flooring material. Whether your vision of a dream home includes a bright-lit sunroom with ceramic tiles connected to a deep redwood-floored kitchen or a concrete driveway built to withstand the harsh extremes of Canadian winters, we work with your vision to make your project a reality.</p>
					<ul>
						<li>Hardwood</li>
						<li>Ceramic Tiles</li>
						<li>Concrete</li>
						<li>Carpentry</li>
					</ul>
					<h2>Our Floor Projects</h2>
					<p>Our hardwood floors are 100% wood and smoothed down to the last cinch. No more tripping over loose floorboards. Projects we typically complete are ceramic tiles for bathrooms, concrete flooring for garages, and of course, hardwood flooring where it is needed.</p>
			</div>
			<div class="background"></div>
			</section>
		<section id="electrical">
			<div class="content">
				<h2>Electrical</h2>
				<p>Is your home's electrical wiring system in need of a replacement?<br />
Many older homes are equipped with old electircal wiring, which may wear down dangerously over time. The heat of overused circuits can cause unseen damage to home insulation. Homeowners may want to have their outdated electrical wiring replaced. Other homeowners may simply have grown tired of their old lighting and want to change it up. We offer service for all your lighting needs.</p>
				<p>From outlets to ceiling lights, we work behind the scenes to provide you with a stable electrical job, to ensure the safety and reliability of your home's electrical system. </p>
			</div>
			<div class="background"></div>
		</section>
		<section id="drywall">
			<div class="content">
				<h2>Drywalling</h2>
				<p>A good drywall job is underrated. The insulation of a good drywalling job should work to effectivey protect the inside of the house and its occupants from the elements, especially from the extreme hot and cold seasons Canada faces. Homeowners want to be sure their homes are keeping in heat rather than letting it escape through cracks or holes in the insulation.</p>
				<p>At Razno Renovations we use innovating tools to make the drywalling job more efficient and durable. We are aware of the best insulation methods and techniques to keep walls solid and maximally trap heat. We use this knowledge everyday when making decisions for our appreciated customers.</p>
			</div>
			<div class="background"></div>
		</section>
		<section id="basement">
			<div class="content">
				<h2>Basement Finishing</h2>
				<p>Is the lower level of your house currently just a concrete storage area filled with boxes? Are you looking to convert the cold space into a warm and cozy second living area or recreation room? Or have you taken up a new craftwork hobby and require that extra space to create your best work?</p>
				<p>Here at Razno Renovations we work with you to create the basement of your dreams. Working from the ground up, we provide you with the best quality furnishing, framing and insulating jobs to create the perfect living space for you and your family. We are familiar with all the important building codes and safety regulations required for a safe and secure home. You have our guarantee that we will integrate these codes seamlessly with your vision. Functionality and comfort is of utmost importance to us.</p>
			</div>
			<div class="background"></div>
		</section>
		<section id="deckFence">
			<div class="content">
				<h2>Deck and Fence</h2>
				<p>We install property fencing and have a wide variety of fences to choose from. Whether you would like wooden plank fences for extra privacy or a simple chain link just to have a property border in place, we can build it hassle-free. We can fix broken fences as well and put up new boards.</p>
				<p>If your backyard is missing a deck, we can provide you with that as well. We can build one at the front or the back, or even a wraparound deck. Let us know your preference and we will tend to your needs.</p>
			</div>
			<div class="background"></div>
		</section>
		<section id="windowDoor">
			<div class="content">
				<h2>Window and Door Installation</h2>
				<p>Have the hinges on your house doors or windows become old and rusty with time? Does your door handle get stuck more often than not when you try and turn it to get into a room? Rust is one of the main issues homeowners have, which leads to problems in terms of opening and closing doors and windows.</p>
				<p>No house is complete without windows and doors. We are the ones to call whether you need to install windows and doors for your new house or to replace old ones which have been damaged.<p>
			</div>
			<div class="background"></div>
		</section>
		</div>
		<footer></footer>
	</body>
</html>

CSS:

html,body {
	width: 100%;
	height: 100%;
	font-size: 100%;
	font-size: 10px;
}
html {
	overflow: hidden;
}
body {
	overflow: auto;
	font-family: arial,helvetica,sans-serif;
	color: #fcfcfc;
	background: #c83837;
}
a {
	text-decoration: none;
	color: #c83837;
	font-size: 1.4rem;
}
p,li {
	margin: 1em 0;
	font-size: 1.4rem;
}
h2 {
	margin: 1em 0;
	font-size: 1.8rem;
	color: #c83837;
}
li {
	margin: 0 0 0 1.8em;
	font-size: 1.4rem;
	list-style: disc;
}
.split {
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}
.half {
	width: 49.9%;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
header {
	width: 100%;
	height: 10em;
	box-shadow: 0px -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	background: #fcfcfc;
	overflow: hidden;
	position: fixed;
	z-index: 999;
}
.logo .centerHack {
	height: 10rem;
	display: inline-block;
	vertical-align: middle;
}
.logotype {
	color: #000000;
}
nav {
	padding: 0 1rem 0 0;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	color: #000000;
}
.pageWrap {
	margin: 10rem 0 0 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	position: fixed;
}
section {
	border-top: 0.8rem solid #c83837;
}
.content {
	padding: 2.5rem 3rem;
	min-height: 90vh;
	width: 32rem;
	box-shadow: inset -1rem 0rem 2.1rem -1rem rgba(0,0,0,0.75);
	background: #333333;
	float: left;
	box-sizing: border-box;
}
.background {
	margin: 0 0 0 -32rem;
	padding: 0 32rem 0 0;
	min-height: 90vh;
	width: 100%;
	background-position: 23% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
#services .background {
	background-image: url(../images/basic.jpg);
}
#flooring .background {
	background-image: url(../images/flooring.jpg);
}
#electrical .background {
	background-image: url(../images/electrical.jpg);
}
#drywall .background {
	background-image: url(../images/drywall.jpg);
}
#basement .background {
	background-image: url(../images/basement.jpg);
}
#deckFence .background {
	background-image: url(../images/deck.jpg);
}
#windowDoor .background {
	background-image: url(../images/windowsDoors.jpg);
}

Okay so, I am trying to create this page, and everything looks absolutely great, until... You get to the last section. For some reason there is a stop and it won't scroll any more to fill the entire screen (aint that kinda the point of VH?).

Next I am trying to find a way so that the content does not cause reflowing issue as you shrink the window... I can't tell why the section will shrink smaller than the content...

Last if we can solve all that with no major issues, can we make it so that even though it is set to 100vh, that it actually appears a little smaller so it scrolls seamlessly between sections (because the header takes up some space). I have tried smaller than 100vh, but then I get weird problems are certain resolutions showing the background below everything...

I have been banging my head for over two hours and just need a fresh pair of eyes.

Thanks for any help!

COBOLdinosaur · January 30, 2016

can we make it so that even though it is set to 100vh, that it actually appears a little smaller

That would be counter to the nature of the unit of measure. if you need to modify the the value thenyou need to use the CSS calc() to adjusted. however the value has to be a literal as there is no support for variables in calc().

So you could use height:calc(100vh - 50px); or whatever value you need the bugs that plagued both IE and Chrome for that kind of format seem to be resolved. As for the other two issues it might simply be that the browser is choking on:

.pageWrap {
	margin: 10rem 0 0 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	position: fixed;
}

which does not seem to make sense. the margin means it cannot be 100vh and remain in the window and setting position fixed without setting top, left, right, or bottom, defaults to top:0;left:0; which would force the margin to be outside of the viewport and actually result in the height of the element being being 100vh+10rem;

There is an exploration of calc used with vh/vw on my site: http://coboldinosaur.com/pages/css-calc-function.html that might help you dig through the issues.

DarkxPunk · January 30, 2016

I think the calc will solve the issue, gotta play with it. With the 100vh+10rem I assumed that would be the case, but why does it stop the scrolling, if its bigger id assume it would just let me scroll further.

I will play with this and probably repost the updated code if I have more issues, if anyone can think of a more "backwards compatible" alternative to calc that will solve the issue as well, I am all ears.

Thanks for the promising suggestion!

dsonesuk · January 30, 2016

With changing and manipulation using top padding with overflow: hidden; to allow for area produced by header

            html,body {
                /*width: 100%;*/
                height: 100%;
                font-size: 100%;
                font-size: 10px;
            }
            html {
                /* overflow: hidden;*/
            }
            body {
                /*  overflow: auto;*/
                font-family: arial,helvetica,sans-serif;
                color: #fcfcfc;
                background: #c83837;
            }
            a {
                text-decoration: none;
                color: #c83837;
                font-size: 1.4rem;
            }
            p,li {
                margin: 1em 0;
                font-size: 1.4rem;
            }
            h2 {
                margin: 1em 0;
                font-size: 1.8rem;
                color: #c83837;
            }
            li {
                margin: 0 0 0 1.8em;
                font-size: 1.4rem;
                list-style: disc;
            }
            .split {
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
            }
            .half {
                width: 49.9%;
            }
            .left {
                text-align: left;
            }
            .right {
                text-align: right;
            }
            header {
                width: 100%;
                height: 10em;
                box-shadow: 0px -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
                background: #fcfcfc;
                overflow: hidden;
                position: fixed;
                z-index: 999;
            }
            .logo .centerHack {
                height: 10rem;
                display: inline-block;
                vertical-align: middle;
            }
            .logotype {
                color: #000000;
            }
            nav {
                padding: 0 1rem 0 0;
            }
            nav ul li {
                display: inline-block;
            }
            nav ul li a {
                color: #000000;
            }
            .pageWrap {
                margin: 10rem 0 0 0;
                width: 100%;
                height: 100vh;
                /*   overflow: auto;*/
                position: fixed;
            }
            section {
                border-top: 0.8rem solid #c83837;
            }
            .content {
                padding: 2.5rem 3rem;
                min-height: 90vh;
                width: 32rem;
                box-shadow: inset -1rem 0rem 2.1rem -1rem rgba(0,0,0,0.75);
                background: #333333;
                float: left;
                box-sizing: border-box;
            }
            .background {
                margin: 0 0 0 -32rem;
                padding: 0 32rem 0 0;
                min-height: 100vh;
                width: 100%;
                background-position: 23% 50%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: cover;
            }
#services .background {
    background-image: url(../images/basic.jpg);
}
#flooring .background {
    background-image: url(../images/flooring.jpg);
}
#electrical .background {
    background-image: url(../images/electrical.jpg);
}
#drywall .background {
    background-image: url(../images/drywall.jpg);
}
#basement .background {
    background-image: url(../images/basement.jpg);
}
#deckFence .background {
    background-image: url(../images/deck.jpg);
}
#windowDoor .background {
    background-image: url(../images/windowsDoors.jpg);
}

            html,body{
                margin: 0;
                padding: 0;
            }


            header {

                width: auto;
                left: 0;
                right:0;
                top:10px;

            }

            body:before {content: ""; height: 10px; position: fixed; background-color: #c83837; left:0; right:0; top:0; z-index: 100;}

            body > * , body > .pageWrap {margin-left: 10px; margin-right: 10px;}

            .pageWrap {min-height: 100vh; overflow:visible; position: static; width: auto; margin-top: 0;}

            .pageWrap section {overflow: hidden; position: relative;  }


            .background {position: absolute; top: 0; bottom: 0; z-index: 0;}

            .content {min-height: 100vh; position: relative; z-index: 10;}

            .first { border: none;}

            .content {
                padding-top: 13rem;
            }

            .first:before {
                background-color: #c83837;
                content: "";
                display: block;
                height: 10px;
                left: 0;
                position: absolute;
                right: 0;
                top: 11rem;
                z-index: 20;
            }

            .first ~ section .content {
                margin-top: -11.8rem;
                z-index: 50;
            }

DarkxPunk · January 31, 2016

dsonesuk... I used some of your code... But I am still lost... I ended up using calc... However I still wanna find a better way!

Now that I got the page working as I want it ill attach the new (cleaner?) code. See if we can find a way to get rid of those calc's.

Here is the page: http://www.testzone.ormt.ca/raznoRenovation.ca/index4.html

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, user-scalable=no"/>
		<base href="">
		<title>Razno Renovations</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default4.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<a class="logo">
				<div class="logo">
					<span class="logotype">Razno Renovations</span>
				</div>
			</a>
			<input type="checkbox" id="navButton" role="button" />
			<label class="navButtonLabel" for="navButton" onclick="">
				<span class="navButton"></span>
			</label>
			<nav>
				<ul>
					<li><a href="">Who We Are</a></li>
					<li><a href="">Our Services</a></li>
					<li><a href="">Start Your Project</a></li>
				</ul>
			</nav>
		</header>
		<div id="pageWrap">
			<section id="services" class="first">
				<div class="background"></div>
				<div class="content first">
					<h2>Building with you the home you want to live in</h2>
					<p>If you are looking to renovate your house and receive a sturdy renovation job, we at Razno Renovations are here for you. We work with the house you currently have and transform it into your very own dream home. We have been working for many years to provide quality service to homeowners everywhere. To suit your needs we offer unique service for every part of your home, from basement to bedroom, floor to ceiling. You have our guarantee and trust that when you call us, you will receive our best service every time.</p>
					<h2>What we offer</h2>
					<ul class="serviceList">
						<li><span id="flooringTmb"></span>Flooring</li>
						<li><span id="electricalTmb"></span>Electrical</li>
						<li><span id="drywallTmb"></span>Drywalling</li>
						<li><span id="basementTmb"></span>Basement Finishing</li>
						<li><span id="deckFenceTmb"></span>Deck & Fence</li>
						<li><span id="windowDoorTmb"></span>Window & Door Installation</li>
					</ul>
				</div>
			</section>
			<section id="flooring">
				<div class="background"></div>
				<div class="content">
					<h2>Flooring</h2>
					<p>Does your newly purachased home have unfavourable carpeting that you would like to replace with smooth, hardwood flooring? Has the cracked tiling of your kitchen come off from its foundation? These and other carpentry jobs are the kinds we at Razno Renovations are known for.<br /> 
We offer renovations in many types of flooring material. Whether your vision of a dream home includes a bright-lit sunroom with ceramic tiles connected to a deep redwood-floored kitchen or a concrete driveway built to withstand the harsh extremes of Canadian winters, we work with your vision to make your project a reality.</p>
					<ul>
						<li>Hardwood</li>
						<li>Ceramic Tiles</li>
						<li>Concrete</li>
						<li>Carpentry</li>
					</ul>
					<h2>Our Floor Projects</h2>
					<p>Our hardwood floors are 100% wood and smoothed down to the last cinch. No more tripping over loose floorboards. Projects we typically complete are ceramic tiles for bathrooms, concrete flooring for garages, and of course, hardwood flooring where it is needed.</p>
				</div>
			</section>
			<section id="electrical">
				<div class="background"></div>
				<div class="content">
					<h2>Electrical</h2>
					<p>Is your home's electrical wiring system in need of a replacement?<br />
Many older homes are equipped with old electircal wiring, which may wear down dangerously over time. The heat of overused circuits can cause unseen damage to home insulation. Homeowners may want to have their outdated electrical wiring replaced. Other homeowners may simply have grown tired of their old lighting and want to change it up. We offer service for all your lighting needs.</p>
					<p>From outlets to ceiling lights, we work behind the scenes to provide you with a stable electrical job, to ensure the safety and reliability of your home's electrical system. </p>
				</div>
			</section>
			<section id="drywall">
				<div class="background"></div>
				<div class="content">
					<h2>Drywalling</h2>
					<p>A good drywall job is underrated. The insulation of a good drywalling job should work to effectivey protect the inside of the house and its occupants from the elements, especially from the extreme hot and cold seasons Canada faces. Homeowners want to be sure their homes are keeping in heat rather than letting it escape through cracks or holes in the insulation.</p>
					<p>At Razno Renovations we use innovating tools to make the drywalling job more efficient and durable. We are aware of the best insulation methods and techniques to keep walls solid and maximally trap heat. We use this knowledge everyday when making decisions for our appreciated customers.</p>
				</div>
			</section>
			<section id="basement">
				<div class="background"></div>
				<div class="content">
					<h2>Basement Finishing</h2>
					<p>Is the lower level of your house currently just a concrete storage area filled with boxes? Are you looking to convert the cold space into a warm and cozy second living area or recreation room? Or have you taken up a new craftwork hobby and require that extra space to create your best work?</p>
					<p>Here at Razno Renovations we work with you to create the basement of your dreams. Working from the ground up, we provide you with the best quality furnishing, framing and insulating jobs to create the perfect living space for you and your family. We are familiar with all the important building codes and safety regulations required for a safe and secure home. You have our guarantee that we will integrate these codes seamlessly with your vision. Functionality and comfort is of utmost importance to us.</p>
				</div>
			</section>
			<section id="deckFence">
				<div class="background"></div>
				<div class="content">
					<h2>Deck and Fence</h2>
					<p>We install property fencing and have a wide variety of fences to choose from. Whether you would like wooden plank fences for extra privacy or a simple chain link just to have a property border in place, we can build it hassle-free. We can fix broken fences as well and put up new boards.</p>
					<p>If your backyard is missing a deck, we can provide you with that as well. We can build one at the front or the back, or even a wraparound deck. Let us know your preference and we will tend to your needs.</p>
				</div>
			</section>
			<section id="windowDoor">
				<div class="background"></div>
				<div class="content">
					<h2>Window and Door Installation</h2>
					<p>Have the hinges on your house doors or windows become old and rusty with time? Does your door handle get stuck more often than not when you try and turn it to get into a room? Rust is one of the main issues homeowners have, which leads to problems in terms of opening and closing doors and windows.</p>
					<p>No house is complete without windows and doors. We are the ones to call whether you need to install windows and doors for your new house or to replace old ones which have been damaged.</p>
				</div>
			</section>
		</div>
		<footer></footer>
	</body>
</html>

CSS

html,body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-size: 10px;
	background: #c83837;
}
body {
	font-family: arial,helvetica,sans-serif;
}
a {
	text-decoration: none;
	color: #c83837;
	font-size: 1.4rem;
}
p,li {
	margin: 1em 0;
	font-size: 1.4rem;
	color: #fcfcfc;
}
h2 {
	margin: 1em 0;
	font-size: 1.8rem;
	color: #c83837;
}
li {
	margin: 0 0 0 1.8rem;
	list-style: disc;
}
header {
	width: 100%;
	height: 8rem;
	background: #c83837;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	position: fixed;
	z-index: 99;
}
.logo {
	width: 32rem;
	height: 8rem;
	display: inline-block;
	text-align: center;
}
.logotype {
	padding: 2.5rem 0 0 0;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fcfcfc;
	display: inline-block;
}
#navButton {
	position: absolute;
	top: 2.7rem;
	right: 6.4rem;
	visibility: hidden;
}
.navButtonLabel {
	width: 2.5rem;
	height: 1.7rem;
	display: block;
	position: absolute;
	top: 2.8rem;
	right: 6rem;
}
.navButton {
	font-size: 28px;
	position: absolute;
	display: none;
}
.navButton:before {
	content: "";
	position: absolute;
	width: 0.9em;
	height: 0.12em;
	background: #fcfcfc;
	box-shadow: 0 0.25em 0 0 #fcfcfc, 0 0.5em 0 0 #fcfcfc;
}
input[type=checkbox]:checked ~ nav {
	display: block;
}
nav {
	padding: 3rem 0 0 0;
	min-width: calc(100% - 32rem);
	display: inline-block;
	position: fixed;
	text-align: center;
	font-weight: bold;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	color: #fcfcfc;
}
#pageWrap {
	padding: 8rem 0 0 0;
}
section {
	border-top: 0.8rem solid #c83837;
	min-height: calc(100vh - 8.8rem);
	overflow: hidden;
	position: relative;
}
.first {
	min-height: calc(100vh - 8rem) !important;
	border-top: 0;
}
.content {
	padding: 2.5rem 3rem;
	width: 32rem;
	min-height: calc(100vh - 8.8rem);
	box-shadow: inset -1rem 0rem 2.1rem -1rem rgba(0,0,0,0.75);
	background: #333333;
	float: left;
	box-sizing: border-box;
}
.background {
	margin: 0 0 0 32rem;
	width: calc(100% - 32rem);
	height: 100%;
	background-position: 26% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: absolute;
	top: 0;
	bottom: 0;
}
#services .background {
	background-image: url(../images/basic.jpg);
}
#flooring .background {
	background-image: url(../images/flooring.jpg);
}
#electrical .background {
	background-image: url(../images/electrical.jpg);
}
#drywall .background {
	background-image: url(../images/drywall.jpg);
}
#basement .background {
	background-image: url(../images/basement.jpg);
}
#deckFence .background {
	background-image: url(../images/deck.jpg);
}
#windowDoor .background {
	background-image: url(../images/windowsDoors.jpg);
}
@media only screen and (max-width: 767px) {
	.navButton {
		display: block;
	}
	nav {
		display: block;
		padding: 0;
		width: 100%;
		min-width: 0;
		position: absolute;
		top: 8rem;
		right: 0rem;
		background: #c83837;
		display: none;
		box-shadow: 0 0.1rem 2.1rem -0.5rem rgba(0,0,0,0.6);
	}
	nav li {
		margin: 0;
		padding: 0.5rem 2.5rem;
		text-align: center;
	}
}
@media only screen and (max-width: 736px) {
	section,.first,.content {
		min-height: calc(50vh - 4.4rem) !important;
		width: 100vw;
	}
	.background {
		margin: 0;
		padding: 0;
		width: 100vw;
		height: calc(50vh - 4.4rem) !important;
		position: relative;
		background-attachment: scroll;
	}
}
@media only screen and (max-width: 481px) {
	#navButton {
		right: 2.4rem;
		visibility: hidden;
	}
	.navButtonLabel {
		right: 2rem;
	}
	.logo {
		padding: 0 0 0 1rem;
		width: 0;
		white-space: nowrap;
	}
	nav li {
		padding: 0.5rem 0;
		width: 100%;
	}
}

--Edit-- Let's try and update the code before anyone can notice... Shhh... If you are reading this, you win!

Edited January 31, 2016 by DarkxPunk

dsonesuk · January 31, 2016

ALL calc() overriding using 100vh only

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, user-scalable=no"/>
        <base href="">
        <title>Razno Renovations</title>
        <link rel="stylesheet" href="http://www.testzone.ormt.ca/raznoRenovation.ca/css/reset.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="http://www.testzone.ormt.ca/raznoRenovation.ca/css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="http://www.testzone.ormt.ca/raznoRenovation.ca/css/default4.css" type="text/css" media="screen" charset="utf-8"/>
        <style type="text/css">
            /* all styling here will overide styling from above */

            /* FIRSTLY DO NOT USE ANY STYLING THAT SETS 100% WIDTH*/
            header, .background, nav {width: auto; left:0; right:0; min-width:0;}

            body {min-width: 320px;}


            #pageWrap {padding-top: 0; min-height: 100vh;}

            #pageWrap section .content {padding-top: 10.5rem; min-height: 100vh;}
            #pageWrap section {min-height:0;}
            .first {min-height: 100vh !important;}

            #pageWrap section.first ~ section .content {margin-top: -8.8rem;}

            @media only screen and (max-width: 736px) {

                #pageWrap section .content  {  padding: 2.5rem 3rem;}

                .first {min-height: 50vh !important;}

                /* AGAIN DO NOT USE ANY STYLING THAT SETS 100% WIDTH scrollbars appear  if you don't allow for padding/margins/any type of borders - so its better practice to avoid*/
                section, .first, .content {width: auto;} /* reset to remove scrollbars that DID appear*/



                section.first {
                    padding-top: 8rem;
                }
                #pageWrap section.first  .first, #pageWrap section.first ~ section .content {
                    margin-top:0;
                }

                #pageWrap section .content, .background {
                    min-height: 50vh !important;
                }

            }

        </style>

    </head>
    <body>
        <header>
            <a class="logo">
                <div class="logo">
                    <span class="logotype">Razno Renovations</span>
                </div>
            </a>
            <input  type="checkbox" id="navButton" role="button" >
            <label class="navButtonLabel" for="navButton" onclick="">
                <span class="navButton"></span>
            </label>
            <nav>
                <ul>
                    <li><a href="">Who We Are</a></li>
                    <li><a href="">Our Services</a></li>
                    <li><a href="">Start Your Project</a></li>
                </ul>
            </nav>
        </header>
        <div id="pageWrap">
            <section id="services" class="first">
                <div class="background"></div>
                <div class="content first">
                    <h2>Building with you the home you want to live in</h2>
                    <p>If you are looking to renovate your house and receive a sturdy renovation job, we at Razno Renovations are here for you. We work with the house you currently have and transform it into your very own dream home. We have been working for many years to provide quality service to homeowners everywhere. To suit your needs we offer unique service for every part of your home, from basement to bedroom, floor to ceiling. You have our guarantee and trust that when you call us, you will receive our best service every time.</p>
                    <h2>What we offer</h2>
                    <ul class="serviceList">
                        <li><span id="flooringTmb"></span>Flooring</li>
                        <li><span id="electricalTmb"></span>Electrical</li>
                        <li><span id="drywallTmb"></span>Drywalling</li>
                        <li><span id="basementTmb"></span>Basement Finishing</li>
                        <li><span id="deckFenceTmb"></span>Deck & Fence</li>
                        <li><span id="windowDoorTmb"></span>Window & Door Installation</li>
                    </ul>
                </div>
            </section>
            <section id="flooring">
                <div class="background"></div>
                <div class="content">
                    <h2>Flooring</h2>
                    <p>Does your newly purachased home have unfavourable carpeting that you would like to replace with smooth, hardwood flooring? Has the cracked tiling of your kitchen come off from its foundation? These and other carpentry jobs are the kinds we at Razno Renovations are known for.<br />
                        We offer renovations in many types of flooring material. Whether your vision of a dream home includes a bright-lit sunroom with ceramic tiles connected to a deep redwood-floored kitchen or a concrete driveway built to withstand the harsh extremes of Canadian winters, we work with your vision to make your project a reality.</p>
                    <ul>
                        <li>Hardwood</li>
                        <li>Ceramic Tiles</li>
                        <li>Concrete</li>
                        <li>Carpentry</li>
                    </ul>
                    <h2>Our Floor Projects</h2>
                    <p>Our hardwood floors are 100% wood and smoothed down to the last cinch. No more tripping over loose floorboards. Projects we typically complete are ceramic tiles for bathrooms, concrete flooring for garages, and of course, hardwood flooring where it is needed.</p>
                </div>
            </section>
            <section id="electrical">
                <div class="background"></div>
                <div class="content">
                    <h2>Electrical</h2>
                    <p>Is your home's electrical wiring system in need of a replacement?<br />
                        Many older homes are equipped with old electircal wiring, which may wear down dangerously over time. The heat of overused circuits can cause unseen damage to home insulation. Homeowners may want to have their outdated electrical wiring replaced. Other homeowners may simply have grown tired of their old lighting and want to change it up. We offer service for all your lighting needs.</p>
                    <p>From outlets to ceiling lights, we work behind the scenes to provide you with a stable electrical job, to ensure the safety and reliability of your home's electrical system. </p>
                </div>
            </section>
            <section id="drywall">
                <div class="background"></div>
                <div class="content">
                    <h2>Drywalling</h2>
                    <p>A good drywall job is underrated. The insulation of a good drywalling job should work to effectivey protect the inside of the house and its occupants from the elements, especially from the extreme hot and cold seasons Canada faces. Homeowners want to be sure their homes are keeping in heat rather than letting it escape through cracks or holes in the insulation.</p>
                    <p>At Razno Renovations we use innovating tools to make the drywalling job more efficient and durable. We are aware of the best insulation methods and techniques to keep walls solid and maximally trap heat. We use this knowledge everyday when making decisions for our appreciated customers.</p>
                </div>
            </section>
            <section id="basement">
                <div class="background"></div>
                <div class="content">
                    <h2>Basement Finishing</h2>
                    <p>Is the lower level of your house currently just a concrete storage area filled with boxes? Are you looking to convert the cold space into a warm and cozy second living area or recreation room? Or have you taken up a new craftwork hobby and require that extra space to create your best work?</p>
                    <p>Here at Razno Renovations we work with you to create the basement of your dreams. Working from the ground up, we provide you with the best quality furnishing, framing and insulating jobs to create the perfect living space for you and your family. We are familiar with all the important building codes and safety regulations required for a safe and secure home. You have our guarantee that we will integrate these codes seamlessly with your vision. Functionality and comfort is of utmost importance to us.</p>
                </div>
            </section>
            <section id="deckFence">
                <div class="background"></div>
                <div class="content">
                    <h2>Deck and Fence</h2>
                    <p>We install property fencing and have a wide variety of fences to choose from. Whether you would like wooden plank fences for extra privacy or a simple chain link just to have a property border in place, we can build it hassle-free. We can fix broken fences as well and put up new boards.</p>
                    <p>If your backyard is missing a deck, we can provide you with that as well. We can build one at the front or the back, or even a wraparound deck. Let us know your preference and we will tend to your needs.</p>
                </div>
            </section>
            <section id="windowDoor">
                <div class="background"></div>
                <div class="content">
                    <h2>Window and Door Installation</h2>
                    <p>Have the hinges on your house doors or windows become old and rusty with time? Does your door handle get stuck more often than not when you try and turn it to get into a room? Rust is one of the main issues homeowners have, which leads to problems in terms of opening and closing doors and windows.</p>
                    <p>No house is complete without windows and doors. We are the ones to call whether you need to install windows and doors for your new house or to replace old ones which have been damaged.</p>
                </div>
            </section>
        </div>
        <footer></footer>
    </body>
</html>

Edited January 31, 2016 by dsonesuk

DarkxPunk · January 31, 2016

Wow dsonesuk... Works great! I am going to dissect your code as I should to gather all the ins and outs, but wow, it really works...

Will comment however, the background-attachment: fixed is there for a very specific reason, it creates a cool scroll effect as the sections go by. I know it can be a little laggy on some browsers, but I have yet to find it too jarring yet. Thanks for the suggestion however.

Next (dear god) I feel like such a scrub... I should know better about width 100%... I have been doing this long enough to know better. *slaps self*

Thanks again for all the help!

dsonesuk · January 31, 2016

Made update, missed a few calc() nav section.

dsonesuk · February 2, 2016

Meant to point this out

COBOLdinosaur
setting position fixed without setting top, left, right, or bottom, defaults to top:0;left:0;

Actually it does NOT default to top:0; left:0; it follows the flow of the document elements, UNTIL you set at least top and left properties.

Edited February 2, 2016 by dsonesuk

COBOLdinosaur · February 2, 2016

Actually it does NOT default to top:0; left:0; it follows the flow of the document elements, UNTIL you set at least top and left properties.

:sorry: You're right, which can make it strange if you don't set the position; get real weird in a mobile friendly design using media queries.

DarkxPunk · February 7, 2016

Thanks again to both of you for all your help!

I think I have finally got it where I want it, please feel free to check my code and yell at me if I am still making boo boos.

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, user-scalable=no"/>
		<base href="">
		<title>Razno Renovations</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default5.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<a class="logotype" href="">Razno Renovations</a>
		</header>
		<input type="checkbox" id="navButton" role="button" />
		<label class="hamburgerLabelX" for="navButton">
			<span class="hamburgerX"></span>
		</label>
		<nav>
			<ul>
				<li id="navAbout"><a href="">Who We Are</a></li>/
				<li id="navServices"><a href="">Our Services</a></li>/
				<li id="navContact"><a href="">Start Your Project</a></li>
			</ul>
		</nav>
		<div class="contentWrap">
			<section id="services" class="first">
				<div class="background"></div>
				<div class="content first">
					<h2>Building with you the home you want to live in</h2>
					<p>If you are looking to renovate your house and receive a sturdy renovation job, we at Razno Renovations are here for you. We work with the house you currently have and transform it into your very own dream home. We have been working for many years to provide quality service to homeowners everywhere. To suit your needs we offer unique service for every part of your home, from basement to bedroom, floor to ceiling. You have our guarantee and trust that when you call us, you will receive our best service every time.</p>
					<h2>What we offer</h2>
					<ul class="serviceList">
						<li><span id="flooringTmb"></span>Flooring</li>
						<li><span id="electricalTmb"></span>Electrical</li>
						<li><span id="drywallTmb"></span>Drywalling</li>
						<li><span id="basementTmb"></span>Basement Finishing</li>
						<li><span id="deckFenceTmb"></span>Deck & Fence</li>
						<li><span id="windowDoorTmb"></span>Window & Door Installation</li>
					</ul>
				</div>
			</section>
			<section id="flooring">
				<div class="background"></div>
				<div class="content">
					<h2>Flooring</h2>
					<p>Does your newly purachased home have unfavourable carpeting that you would like to replace with smooth, hardwood flooring? Has the cracked tiling of your kitchen come off from its foundation? These and other carpentry jobs are the kinds we at Razno Renovations are known for.<br /> 
	We offer renovations in many types of flooring material. Whether your vision of a dream home includes a bright-lit sunroom with ceramic tiles connected to a deep redwood-floored kitchen or a concrete driveway built to withstand the harsh extremes of Canadian winters, we work with your vision to make your project a reality.</p>
					<ul>
						<li>Hardwood</li>
						<li>Ceramic Tiles</li>
						<li>Concrete</li>
						<li>Carpentry</li>
					</ul>
					<h2>Our Floor Projects</h2>
					<p>Our hardwood floors are 100% wood and smoothed down to the last cinch. No more tripping over loose floorboards. Projects we typically complete are ceramic tiles for bathrooms, concrete flooring for garages, and of course, hardwood flooring where it is needed.</p>
				</div>
			</section>
			<section id="electrical">
				<div class="background"></div>
				<div class="content">
					<h2>Electrical</h2>
					<p>Is your home's electrical wiring system in need of a replacement?<br />
Many older homes are equipped with old electircal wiring, which may wear down dangerously over time. The heat of overused circuits can cause unseen damage to home insulation. Homeowners may want to have their outdated electrical wiring replaced. Other homeowners may simply have grown tired of their old lighting and want to change it up. We offer service for all your lighting needs.</p>
					<p>From outlets to ceiling lights, we work behind the scenes to provide you with a stable electrical job, to ensure the safety and reliability of your home's electrical system. </p>
				</div>
			</section>
			<section id="drywall">
				<div class="background"></div>
				<div class="content">
					<h2>Drywall</h2>
					<p>A good drywall job is underrated. The insulation of a good drywalling job should work to effectivey protect the inside of the house and its occupants from the elements, especially from the extreme hot and cold seasons Canada faces. Homeowners want to be sure their homes are keeping in heat rather than letting it escape through cracks or holes in the insulation.</p>
					<p>At Razno Renovations we use innovating tools to make the drywalling job more efficient and durable. We are aware of the best insulation methods and techniques to keep walls solid and maximally trap heat. We use this knowledge everyday when making decisions for our appreciated customers.</p>
				</div>
			</section>
			<section id="basement">
				<div class="background"></div>
				<div class="content">
					<h2>Basement Finishing</h2>
					<p>Is the lower level of your house currently just a concrete storage area filled with boxes? Are you looking to convert the cold space into a warm and cozy second living area or recreation room? Or have you taken up a new craftwork hobby and require that extra space to create your best work?</p>
					<p>Here at Razno Renovations we work with you to create the basement of your dreams. Working from the ground up, we provide you with the best quality furnishing, framing and insulating jobs to create the perfect living space for you and your family. We are familiar with all the important building codes and safety regulations required for a safe and secure home. You have our guarantee that we will integrate these codes seamlessly with your vision. Functionality and comfort is of utmost importance to us.</p>
				</div>
			</section>
			<section id="deckFence">
				<div class="background"></div>
				<div class="content">
					<h2>Deck and Fence</h2>
					<p>We install property fencing and have a wide variety of fences to choose from. Whether you would like wooden plank fences for extra privacy or a simple chain link just to have a property border in place, we can build it hassle-free. We can fix broken fences as well and put up new boards.</p>
					<p>If your backyard is missing a deck, we can provide you with that as well. We can build one at the front or the back, or even a wraparound deck. Let us know your preference and we will tend to your needs.</p>
				</div>
			</section>
			<section id="windowDoor">
				<div class="background"></div>
				<div class="content">
					<h2>Window and Door Installation</h2>
					<p>Have the hinges on your house doors or windows become old and rusty with time? Does your door handle get stuck more often than not when you try and turn it to get into a room? Rust is one of the main issues homeowners have, which leads to problems in terms of opening and closing doors and windows.</p>
					<p>No house is complete without windows and doors. We are the ones to call whether you need to install windows and doors for your new house or to replace old ones which have been damaged.</p>
				</div>
			</section>
		</div>
		<footer></footer>
	</body>
</html>

CSS:

html,body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-size: 10px;
	font-family: arial,helvetica,sans-serif;
	background: #c83837;
}
body {
	min-width: 32rem;
}
a,a:link,a:visited,a:hover,a:active {
	text-decoration: none;
	color: #c83837;
	font-size: 1.4rem;
}
a:link {
	
}
a:visited {
	
}
a:hover {
	
}
a:active {
	
}
p,li {
	margin: 1rem 0;
	font-size: 1.4rem;
	color: #fcfcfc;
}
h2 {
	margin: 1rem 0;
	font-size: 1.8rem;
	color: #c83837;
}
li {
	margin: 0 0 0 1.8rem;
	list-style: disc;
}
header {
	padding: 0.6rem 4.85rem;
	width: auto;
	height: 4rem;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	text-align: left;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #c83837;
	box-sizing: border-box;
	z-index: 100;
}
.logotype,a.logotype {
	font-size: 2.4rem;
	font-weight: bold;
	color: #fcfcfc;
	line-height: 2.8rem;
	display: inline-block;
	white-space: nowrap;
}
/* Nav */
nav {
	padding: 1.3rem 0 1.3rem 32rem;;
	width: auto;
	height: 4rem;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	z-index: 101;
	white-space: nowrap;
}
nav ul {
	display: inline-block;
}
nav ul li {
	margin: 0 0.5rem;
	display: inline-block;
}
nav ul li a {
	display: inline-block;
	color: #fcfcfc !important;
}
/* Hamburger Button X */
#navButton {
	display: none;
}
#navButton:checked ~ .hamburgerLabelX .hamburgerX,
#navButton:checked ~ .hamburgerLabelX .hamburgerX::before,
#navButton:checked ~ .hamburgerLabelX .hamburgerX::after {
	transition:
		background-color 0s linear 0.2s,
		top 0.2s linear 0s,
		transform 0.2s linear 0.4s;
}
#navButton:checked ~ .hamburgerLabelX .hamburgerX {
	background-color: transparent;
}
#navButton:checked ~ .hamburgerLabelX .hamburgerX::before {
	top: 0em;
	transform: rotate(45deg) scale(0.8);
}
#navButton:checked ~ .hamburgerLabelX .hamburgerX::after {
	top: -0.3em;
	transform: rotate(-45deg) scale(0.8);
}
.hamburgerLabelX {
	display: inline-block;
	cursor: pointer;
}
.hamburgerX,.hamburgerX::before,.hamburgerX::after {
	content: "";
	background-color: #fcfcfc;
	margin: 0;
	border: 0;
	border-radius: 25px;
	padding: 0;
	width: 2.5em;
	height: 0.3em;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	font-size: 1rem;
	transition:
		background-color 0s linear 0.4s,
		top 0.2s linear 0.5s,
		transform 0.2s linear 0.2s;
}
.hamburgerX {
	margin: 0.6em 0;
}
.hamburgerX::before {
	top: -0.6em;
}
.hamburgerX::after {
	top: 0.3em;
}
/* Hamburger Button X */
.hamburgerLabelX {
	position: fixed;
	top: 1.25rem;
	right: 4.85rem;
	display: none;
	z-index: 102;
}
/* Nav */
/* Sections */
.contentWrap {
	min-height: 100vh;
}
section {
	border-top: 0.8rem solid #c83837;
	overflow: hidden;
	position: relative;
}
section.first ~ section .content {
	margin-top: -4.8rem;
}
.first {
	min-height: 100vh !important;
	border-top: 0;
}
.first .content {
	padding-top: 5.5rem
}
.content {
	padding: 6.5rem 3rem 1.5rem;
	width: 32rem;
	min-height: 100vh;
	box-shadow: inset -1rem 0rem 2.1rem -1rem rgba(0,0,0,0.75);
	background: #333333;
	float: left;
	box-sizing: border-box;
}
.background {
	margin: 0 0 0 32rem;
	width: 100vw;
	height: 100%;
	background-position: 26% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	position: absolute;
	left: 0;
	right 0;
}
#services .background {
	background-image: url(../images/basic.jpg);
}
#flooring .background {
	background-image: url(../images/flooring.jpg);
}
#electrical .background {
	background-image: url(../images/electrical.jpg);
}
#drywall .background {
	background-image: url(../images/drywall.jpg);
}
#basement .background {
	background-image: url(../images/basement.jpg);
}
#deckFence .background {
	background-image: url(../images/deck.jpg);
}
#windowDoor .background {
	background-image: url(../images/windowsDoors.jpg);
}
/* Sections */
@media only screen and (max-width: 439px) {
	html,body {
		font-size: 10px !important;
	}
	header,.hamburgerLabelX {
		transition: all 0.6s ease 0s;
	}
	header {
		padding: 0.6rem 1.5rem;
	}
	.hamburgerLabelX {
		right: 1.5rem;
	}
}
@media only screen and (max-width: 768px) {
	html,body {
		font-size: 10px !important;
	}
	header,.hamburgerLabelX {
		transition: all 0.6s ease 0s;
	}
	header {
		padding: 0.6rem 3rem;
	}
	.hamburgerLabelX {
		right: 3rem;
	}
	#navButton:checked ~ nav {
		top: 4rem;
		transition:
			top 0.8s ease 0s;
	}
	#navButton ~ .hamburgerLabelX {
		display: block;
	}
	nav {
		padding: 1.3rem 0;
		top: 0;
		left: 0;
		background: #c83837;
		z-index: 50;
		transition:
			top 0.8s ease 0s;
	}
	.first {
		padding-top: 4rem;
		min-height: 50vh !important;
	}
	section.first ~ section .content {
		margin-top: 0;
	}
	.first .content, .first .background {
		min-height: 46vh;
	}
	.content,.background {
		padding-top: 0.5rem !important;
		min-height: 47.3vh;
		width: auto;
	}
	.background {
		margin: 0;
		position: relative;
		background-position: 50% 50%;
		background-attachment: scroll;
		box-sizing: border-box;
	}
}
@media only screen and (min-width: 1080px) {
	html,body {
		font-size: 12px !important;
	}
}
@media only screen and (min-height: 1366px) {
	html,body {
		font-size: 17px !important;
	}
	header,.hamburgerLabelX {
		transition: all 0.6s ease 0s;
	}
	header {
		padding: 0.6rem 1rem;
	}
	.hamburgerLabelX {
		right: 1rem;
	}
	#navButton:checked ~ nav {
		top: 4rem;
		transition:
			top 0.8s ease 0s;
	}
	#navButton ~ .hamburgerLabelX {
		display: block;
	}
	nav {
		padding: 1.3rem 0;
		top: 0;
		left: 0;
		background: #c83837;
		z-index: 50;
		transition:
			top 0.8s ease 0s;
	}
	.first {
		padding-top: 4rem;
		min-height: 50vh !important;
	}
	section.first ~ section .content {
		margin-top: 0;
	}
	.first .content, .first .background {
		min-height: 46vh;
	}
	.content,.background {
		padding-top: 0.5rem !important;
		min-height: 47.3vh;
		width: auto;
	}
	.background {
		margin: 0;
		position: relative;
		background-position: 50% 50%;
		background-attachment: scroll;
		box-sizing: border-box;
	}
}

Yay!

Edited February 7, 2016 by DarkxPunk

dsonesuk · February 7, 2016

just a few boo boos

.background {
margin: 0 0 0 32rem;
/*width: 100vw; amended by dsonesuk not required*/
height: 100%;
background-position: 26% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-backface-visibility: hidden;
position: absolute;
left: 0;
right: 0; /* missing ':' */
}

<ul>
<li id="navAbout"><a href="">Who We Are</a></li>/
<li id="navServices"><a href="">Our Services</a></li>/
<li id="navContact"><a href="">Start Your Project</a></li>
</ul>

NOT allowed outside <li>...</li>

html validation has problem with charset used on css link tags, and checkbox using role="button"

DarkxPunk · February 8, 2016

All fixed Thanks again.

Using VH and having spacing issues

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in