DarkxPunk

January 15, 2017

1) no viewport meta tag for scaling for high density devices

2) using em instead of percentages, em is sizes to current font-size set used for current element (10px I believe).

3) using display: inline-block; results in a space of current font-size appearing to right

1) Yes I should add that, but do you think that will actually help with the browser and its math?

2) Doesnt WebKit scale by modifying the root font size? Thus shouldent everything scale evenly? Because what is strange is the padding on the top and bottom seems to scale but not the left. I guess I can try percentages but gonna be a pain.

3) I am not sure what this relates to? Keep in mind it's the left padding that won't scale down.

Thanks for the thoughts and ideas.

January 15, 2017

Hey there,

So I am playing around with different ways to display a logo and using padding to move around text. Everything looks great, except when I try and scale down the page (zoom out). At about 80% in either Safari or Chrome the padding seem to not scale down... I can scale up and keep everything correct...

Note I am using normalize.css and thats it.

CSS

html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px;}

a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}

.logo {
	padding: 10em 10em 0 0;
	background: url(../images/logo-print-label.svg) left center no-repeat;
	display: inline-block;
	vertical-align: bottom;
}
.logo.main {
	padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
	display: block;
}
.logotype {
	font-weight: bold;
	white-space: nowrap;
}
.logotype.title::before {
	content: "Title";
	font-size: 4em;
	line-height: 1.1;
	color: #646469;
}
.logotype.subtitle::after {
	content: "Subtitle";
	padding: 0 0 0 0.078em;
	font-size: 2.1em;
	line-height: 1.1;
	color: #000000;
}

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Description">
		<base href="">
		<title>Title</title>
		<link rel="stylesheet" href="css/normalize.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/default.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<a class="logo main" href="">
				<span class="logotype title"></span>
				<span class="logotype subtitle"></span>
			</a>
		</header>
		<section>
		</section>
		<footer></footer>
	</body>
</html>

Thanks for any ideas as to why this is happening and/or how to get around it!

May 10, 2016

Hey there,

Let me preface that apparently this is impossible, but maybe someone will have an alternative. Here is a small incomplete snippet of code, don't worry you really don't need it all.

<article id="services">
	<div class="imageSwitcher">
		<span class="imageSwitcherBox livingroom">
		</span>
		<span class="imageSwitcherBox livingroom">
		</span>
	</div>
	<div class="background doors2">
	</div>

Basically what I need to do is when I hover over the imageSwitcherBox it will change the background of the class background...

Now I can't take the imageSwitcherBox s out of the imageSwitcher because I need that for positioning... What can I do to achieve my goals?

If you need more code let me know...

Thanks!

February 19, 2016

So I am playing around with font-face and everything works fine, I start a new project and literally copy and paste the same font css file, updating the font location for the new fonts. It loads the normal font, but none of the variations when called. See here:

@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-regular-webfont.eot');
	src: url('../fonts/firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-regular-webfont.woff') format('woff'),
		 url('../fonts/firasans-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-italic-webfont.eot');
	src: url('../fonts/firasans-italic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-italic-webfont.woff') format('woff'),
		 url('../fonts/firasans-italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-medium-webfont.eot');
	src: url('../fonts/firasans-medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-medium-webfont.woff') format('woff'),
		 url('../fonts/firasans-medium-webfont.ttf') format('truetype');
	font-weight: medium;
	font-style: normal;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-mediumitalic-webfont.eot');
	src: url('../fonts/firasans-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-mediumitalic-webfont.woff') format('woff'),
		 url('../fonts/firasans-mediumitalic-webfont.ttf') format('truetype');
	font-weight: medium;
	font-style: italic;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-bold-webfont.eot');
	src: url('../fonts/firasans-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-bold-webfont.woff') format('woff'),
		 url('../fonts/firasans-bold-webfont.ttf') format('truetype');
	font-weight: bolder;
	font-style: normal;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-bolditalic-webfont.eot');
	src: url('../fonts/firasans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-bolditalic-webfont.woff') format('woff'),
		 url('../fonts/firasans-bolditalic-webfont.ttf') format('truetype');
	font-weight: bolder;
	font-style: italic;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-semibold-webfont.eot');
	src: url('../fonts/firasans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-semibold-webfont.woff') format('woff'),
		 url('../fonts/firasans-semibold-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-semibolditalic-webfont.eot');
	src: url('../fonts/firasans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-semibolditalic-webfont.woff') format('woff'),
		 url('../fonts/firasans-semibolditalic-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-light-webfont.eot');
	src: url('../fonts/firasans-light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-light-webfont.woff') format('woff'),
		 url('../fonts/firasans-light-webfont.ttf') format('truetype');
	font-weight: lighter;
	font-style: normal;
}
@font-face {
	font-family: 'fira-sans';
	src: url('../fonts/firasans-lightitalic-webfont.eot');
	src: url('../fonts/firasans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/firasans-lightitalic-webfont.woff') format('woff'),
		 url('../fonts/firasans-lightitalic-webfont.ttf') format('truetype');
	font-weight: lighter;
	font-style: italic;
}

What am I missing? If you need the main css file let me know...

February 8, 2016

All fixed Thanks again.

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!

February 6, 2016

Hey,

So I got this to show you:

As you can see on the left you have the menu sliding in form nowhere in Safari and on the right sliding in from under the header in Firefox (the desired effect).

Attached is my code if anyone can figure out why the massive difference and how I can fix this... I have been toying with z-index and it seems to do nothing.

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>
			<div class="logo">
				<a href="">
					<span class="logotype">Razno Renovations</span>
				</a>
			</div>
			<input type="checkbox" id="hamburgerButtonX" role="button" />
			<label class="hamburgerLabelX" for="hamburgerButtonX">
				<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>
		</header>
		<section></section>
		<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 {
	width: auto;
	height: 4em;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	position: fixed;
	left: 0;
	right: 0;
	background: #c83837;
}
.logo {
	width: 100%;
	max-width: 32rem;
	height: 2.8rem;
	padding: 0.6rem 0 0.6rem 0;
	text-align: center;
}
.logo a {
	display: inline-block;
}
.logotype {
	width: 100%;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fcfcfc;
	line-height: 2.8rem;
	display: inline-block;
}
nav {
	padding: 1.3rem 0 1.3rem 32rem;
	width: 100%;
	height: 4rem;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
}
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 */
#hamburgerButtonX {
	display: none;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX,
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before,
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after {
	transition:
		background-color 0s linear 0.2s,
		top 0.2s linear 0s,
		transform 0.2s linear 0.4s;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX {
	background-color: transparent;
}
#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before {
	top: 0em;
	transform: rotate(45deg) scale(0.8);
}
#hamburgerButtonX: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: 10px;
	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: absolute;
	top: 1.25rem;
	right: 4.85rem;
	z-index: 999;
	display: none;
}
@media only screen and (max-width: 767px) {
	#hamburgerButtonX:checked ~ nav {
		top: 4rem;
	}
	#hamburgerButtonX:checked ~ nav::before {
		top: -4rem;
	}
	#hamburgerButtonX:checked ~ nav,
	#hamburgerButtonX:checked ~ nav::before {
		visibility: visible;
		transition:
			top 0.6s linear 0s;
		;
	}
	.hamburgerLabelX {
		display: block;
	}
	nav::before,
	nav {
		transition:
			top 0.6s linear 0s;
	}
	nav::before {
		content: "";
		width: 100%;
		height: 4rem;
		background: #c83837;
		position: absolute;
		visibility: visible;
		top: 0;
		left: 0;
		z-index: 1;
	}
	nav {
		display: block;
		padding: 1.3rem 0 1.3rem 0;
		width: 100%;
		height: 4rem;
		position: absolute;
		top: 0rem;
		right: 0rem;
		background: #c83837;
		visibility: visible;
		box-shadow: 0 0.1rem 2.1rem -0.5rem rgba(0,0,0,0.6);
		z-index: -2;
	}
}

Thanks for any help!

February 5, 2016

Hey everyone,

I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make.

(If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.)

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				margin: 10rem;
				background: #020202;
				text-align: center;
			}
			
			/* Hamburger Button X */
			#hamburgerButtonX {
				display: none;
			}
			#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX,
			#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before,
			#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::after {
				transition:
					background-color 0s linear 0.2s,
					top 0.2s linear 0s,
					transform 0.2s linear 0.4s;
			}
			#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX {
				background-color: transparent;
			}
			#hamburgerButtonX:checked ~ .hamburgerLabelX .hamburgerX::before {
				top: 0em;
				transform: rotate(45deg) scale(0.8);
			}
			#hamburgerButtonX: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: 10px;
				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 */
		</style>
	</head>
	<body>
		<input type="checkbox" id="hamburgerButtonX" role="button" />
		<label class="hamburgerLabelX" for="hamburgerButtonX">
			<span class="hamburgerX"></span>
		</label>
	</body>
</html>

February 2, 2016

I get it... Thanks.

February 2, 2016

Hey there,

I am playing around with making a header responsive and running into something that does not seem to be expected...

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>
			<div class="logo">
				<a href="">
					<span class="logotype">Razno Renovations</span>
				</a>
			</div><div class="nav">
				<label class="navButtonLabel" for="navButton" onclick="">
					<input type="checkbox" id="navButton" role="button" />
					<span class="hamburger"></span>
				</label>
				<nav>
					<ul>
						<li id="navAbout"><a href="">Who We Are</a></li>
						<li id="navServices">
							<a href="">Our Services</a>
							<ul>
								<li id="navFlooring"><a href="">Flooring</a></li>
								<li id="navElectical"><a href="">Electrical</a></li>
								<li id="navDrywall"><a href="">Drywall</a></li>
								<li id="navBasement"><a href="">Basement Finishing</a></li>
								<li id="navDeckFence"><a href="">Deck & Fence</a></li>
								<li id="navWindowDoor"><a href="">Windows & Doors</a></li>
							</ul>
						</li>
						<li id="navContact"><a href="">Start Your Project</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section></section>
		<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 {
	width: auto;
	min-width: 0;
	height: 4em;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	position: fixed;
	left: 0;
	right: 0;
	background: #c83837;
}
.logo {
	width: 100%;
	height: 2.8rem;
	max-width: 36rem;
	padding: 0.6rem 0 0.6rem 0;
	text-align: center;
	display: inline-block;
	float: left;
}
.logo a {
	display: inline-block;
}
.logotype {
	font-size: 2.8rem;
	font-weight: bold;
	color: #fcfcfc;
	display: inline-block;
	line-height: 2.8rem;
}
.nav {
	width: calc(100% - 36rem);
	min-width: 2.5rem;
	height: 4rem;
	text-align: center;
	float: left;
}
nav {
	display: inline-block;
}
nav ul {
	display: inline-block;
}
nav ul li {
	margin: 0 0.5em;
	display: inline-block
}
nav ul li a{
	display: inline-block;
	color: #fcfcfc !important;
}
nav ul li ul {
	display: block;
	position: absolute;
}
nav ul li ul li {
	margin: 0;
	display: block;
}
nav ul li ul li a {
	display: block;
}
#navButton {
	float: left;
	visibility: hidden;
}
.navButtonLabel {
	display: inline-block;
	cursor: pointer;
}
.hamburger {
	margin: 0.2em;
	height: 1.4em;
	width: 2.5em;
	font-size: 1rem;
}
.hamburger,.hamburger:before,.hamburger:after {
	border-top: 0.3em #fcfcfc solid;
	content: "";
	display: block;
	position: relative;
}
.hamburger:before {
	top: 0.4em;
}
.hamburger:after {
	top: 0.8em;
}

So what I expect is this, as I shrink down the width of the page, as the nav hits its minimum limit the logo should then start to shrink down, however instead the nav wraps and falls below... Now I did attempt to do no-wrap, but no luck... Any ideas?

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!

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!

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!

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!

November 22, 2015

Thanks dsonesuk,

Sadly however this stuff can't be hidden in the head/style because well some old email clients do not read that. It however does get used for some modern tweaks I gotta do for smart phones, except again however, can't be hidden in the head... Sigh... But all your little tweaks and extra redundancy helps! Once I have taken everything and make it solid ill post the skeleton here.

For people reading this in the future *yay time travel* don't disregard the redundancy! Old browsers and email clients used by ancient companies need everything inline, and redundant to ######, just so it does not throw up a massive logo, or text decides not to line up, which on a profession level looks sloppy. But I hope one day we move forward and evolve past this...

Final Template:

<style type="text/css" scoped>
@media only screen and (max-device-width: 414px) {
	table[class=wrap] {
		width: 200px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
@media only screen and (max-width: 380px) {
	table[class=wrap] {
		width: 200px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
</style>
<table class="wrap" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; border: 0; border-collapse: collapse; font-size: 0; text-align: left;">
	<tr>
		<td>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: 100px; height: 100px; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td>
						<img src="http://get-logos.com/wp-content/uploads/2013/04/0008-cloudtech.jpg" alt="" width="100" height="100"/>
					</td>
				</tr>
			</table>
			<table class="separator" border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-right: 1px solid #dbdbdb; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td class="spacer-top" colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 5px; text-align: left; color: #616161"> </td>
				</tr>
				<tr>
					<td colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Name Title</td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Direct:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Cell:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; font-weight: normal; text-align: left; color: #616161">Fax:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Email:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="mailto:email@email.ca">email@email.ca</a></td>
				</tr>
				<tr>
					<td class="spacer-bottom" colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 5px; color: #616161"> </td>
				</tr>

			</table>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Company Name</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 1</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 2</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 3</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="http://www.website.com/">www.website.com</a></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

November 20, 2015

Some browsers add outlines:

<!DOCTYPE html>

<html>

<head>

<style>

.no-outline:focus {

outline: none;

}

</style>

<body>

<summary class="no-outline">Why do You Operate this Type of Business?</summary>

<p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just

supported by chrome so far and Safari has started working on it. You should click on

the little arrow to the left to collapse and uncollapse the text.

</p>

</details>

<summary class="no-outline">In Which Countries Do You Presently Work?</summary>

<p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just

supported by chrome so far and Safari has starting working on it. You should click on

the little arraow to the left to collapse and uncolapse the text.

</p>

</details>

</article>

</body>

</html>

Hope it helps

November 20, 2015

I feel you dsonesuk, I feel you.

November 20, 2015

Hey Rickholcomb,

Don't fear TextEdit too much, it just needs a little wrangling, plus if you are not at your home computer and need to do an edit it may be good to know how to fix TextEdit.

November 20, 2015

So my fears were correct about opening it up in IE... Does not even stay inline IE 9 and back... Now I know for web design I should be laughing at that archaic tech, but sadly some old email clients are still using IE 6 rendering engines (shiver). Any idea how to get this to flow properly back then anyone? I tried even align left (which works in other browsers, but screws up the valign, but no go in IE...

---Edit---

Oh oh oh! I am so giddy! Finally found the solution here: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Obviously this is a mix of everything and my signature template is not final, but it has come a long way! Here it is for everyone else:

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

<tr>

<td colspan="2">Name Title</td>

</tr>

<tr>

<th>Direct:</th>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<th>Email:</th>

<td><a href="mailto:email@email.ca">email@email.ca</a></td>

</tr>

</table>

<tr>

<td>Company Name</td>

</tr>

<tr>

<td>Address Line 1</td>

</tr>

<tr>

<td>Address Line 2</td>

</tr>

<tr>

<td>Address Line 3</td>

</tr>

<tr>

<td><a href="http://www.website.com/">www.website.com</a></td>

</tr>

</table>

</td>

</tr>

</table>

Please make note everyone that even though a lot of this will work sans redundancy, it is required for old stupid email clients, aka if your client has not updated their systems since Outlook Express was invented, and trust me, that is a thing... *shivers* Will post further once with complete redundancy.

November 20, 2015

So I figured why I don't see it in Chrome nor Safari (though how they are processing them after the fact makes absolutely no sense), it seems they are not following my rule as a inline but rather a inline-table... That fixes the sizing issue, even in FF, but not the positioning.

It seems that I need the inline-block + vertical-align for it to work in FF, and just the valign middle for Safari/Chrome... I am scared to open this in IE

November 20, 2015

Huh. You learn something new everyday. I personally can't see it in chrome, nor Safari, in both of them they seem to be sizing as I would expect them. However is firefox I do definitely see it.

Thanks again, will play around with this.

And we all miss something eh?

November 20, 2015

Hey,

Playing around with inline-block, vertical-align, valign on the tables themselves, I finally got them all to valign middle themselves, yay! However using inline-block or inline was not important. Also inline-block did not solve the strange positioning issue (though is has been circumvented with the valign, vertical-align stuff)

Could you maybe further explain this shrinking issue (I can't seem to pin point it using web inspector). It would be nice to know, to solve this in the further if I just wanted to inline them without the align/valign.

Thanks again for all the help!

The issue at hand is having the content flow on smaller displays, sadly placing in a td in the outer table prevents that and rather keeps the image on the left rather than the top, but good suggestion for making them align!

November 20, 2015

Hi there,

Let me preface that I know the way this is being done is probably completely incorrect and taboo. Reason I am doing this is because it will be used as an email signature. With much research about these, and the fact that this signature could be posted to old email clients, I need it to be incredible basic. This lets the signature display correctly on legacy machines to smart phones, so please bare this in mind.

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

<tr>

<td colspan="2">Name Title</td>

</tr>

<tr>

<th>Direct:</td>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<td><a href="tel:11234567890">Number</a></td>

</tr>

<tr>

<th>Email:</td>

<td><a href="mailto:email@email.ca">email@email.ca</a></td>

</tr>

</table>

<tr>

<td>Company Name</td>

</tr>

<tr>

<td>Address Line 1</td>

</tr>

<tr>

<td>Address Line 2</td>

</tr>

<tr>

<td>Address Line 3</td>

</tr>

<tr>

<td><a href="http://www.website.com/">www.website.com</a></td>

</tr>

</table>

</td>

</tr>

</table>

The code in the spoiler as you can see when displayed in a browser does not align all three tables, if I replace the image with text, it then aligns. It does not matter which order the image is placed. Now my intent however was by making these display inline, I would then be able to valign them to the middle. I know if I align left all the tables it will flow correctly, but the valign does not work... No matter how much I toy I cannot achieve this. Any ideas on a solution is appreciated.

Thanks!

February 3, 2015

True... Well once I am done skimming again I will update this thread. Any ideas on possible explainations in the mean time are welcome.

February 3, 2015

That is the odd thing. I have at one point tried reducing the file by leaving only 10 000 then 5000 then 1000 but it made no difference with this specific database. Is it possible there is a character or line break that could be causing the issue? I will again try skimming the file, just to be sure, but thought I would bring my past experiences.

Sign In

DarkxPunk

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by DarkxPunk

Padding not scaling correctly

Padding not scaling correctly

Target Child of Parent with Pure CSS

@font-face help...

Using VH and having spacing issues

Using VH and having spacing issues

Strange Layering Per Browser

Pure CSS Hamburger Button w/ Transition

Why is it wrapping?

Why is it wrapping?

Using VH and having spacing issues

Using VH and having spacing issues

Using VH and having spacing issues

Using VH and having spacing issues

Why when I add an image to a table does not want to align?

Removing a Browser Highlited Effect

How to hide em> on the page

Mac Textedit won't show "style" in Safari

Why when I add an image to a table does not want to align?

Why when I add an image to a table does not want to align?

Why when I add an image to a table does not want to align?

Why when I add an image to a table does not want to align?

Why when I add an image to a table does not want to align?

Cannot import large customer database into MySQL without issues

Cannot import large customer database into MySQL without issues

Browse

Activity