1 reply [Last post]
Phoenix Aviary
Phoenix Aviary's picture
Offline
newbie
Last seen: 3 years 28 weeks ago
Timezone: GMT-4
Joined: 2016-04-06
Posts: 1
Points: 2

Hello. i am new at coding and found this template that i modified.

i cannot get the menu bar to look okay on the middle sizes...ipad sizes. two of the items go below. the banner also does not show up fully on different sizes.....wondering if anyone can help. thank you for any advice you can give.

here is the index.html

<!DOCTYPE HTML>
 
<html>
	<head>
		<title>AQUIDNECK ISLAND DAY CAMP - A SUMMER CAMP FILLED WITH FUN, FRIENDS AND ADVENTURE IN MIDDLETOWN, RI</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.dropotron.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-layers.min.js"></script>
		<script src="js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel.css" />
			<link rel="stylesheet" href="css/style.css" />
		</noscript>
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
	</head>
	<body class="homepage">
 
		<!-- Header Wrapper -->
			<div class="wrapper style1">
 
			<!-- Header -->
				<div id="header">
					<div class="container">
 
 
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="learning.html">Time For Learning</a></li>
<li><a href="counselors.html">Our Counselors</a></li>
<li><a href="register.html">Register/Contact</a></li>
<li><a href="thankyou.html">Thank You!</a></li>
<li><a href="employment.html">Employment</a></li>
</ul>
</li>
</nav>
 
</div>
</div>
 
			<!-- Banner -->
				<div id="banner">
					<section class="container">
					</section>
				</div>
 
			</div>
 
 
 
		<!-- Section Three -->
			<div class="wrapper style4">
				<section class="container">
					<header>
						<h2>Summer Camp filled with Fun, Friends and Adventure</h2>
 
					</header>
 
                  <ul class="style1">
                    <p> <img src="images/girls.jpg" width="200" height="auto" alt="children_at_beach"></p>
<p><strong>They’ve waited all year for summer to come…</strong>&nbsp; Every child knows  summer goes by in a flash. So they’re determined to pack their summer with  loads of fun, friends and adventure. Make it memorable, a summer that lasts.</p>
<p>Aquidneck  Island Day Camp gives parents a way to provide all the fun that our island has  to offer:&nbsp;<strong>Horseback  Riding, Swimming, Sailing, Art  &amp; Music, Sports, Field  Trips &amp;  More! </strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
				</section>
			</div>
 
	<!-- Footer -->
		<div id="footer">
			<section class="container">
				<ul class="icons">
					<li class="active"><a href="https://www.facebook.com/AquidneckIslandDayCamp" class="fa fa-facebook"><span>Facebook</span></a></li>
				</ul>
				<hr />
			</section>
 
			<!-- Copyright -->
				<div id="copyright">
					Copyright © 2011-2016 Aquidneck Island Day Camp All rights reserved.
				</div>			
		</div>
 
	</body>
</html>

here is the style.css

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
 
 
/* Basic */
 
	body {
		background: #222222;
	}
 
		body.loading * {
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}
 
	body, input, select, textarea {
		color: #555555;
		font-family: 'Open Sans', sans-serif;
		font-size: 12pt;
		font-weight: 300;
		line-height: 1.65em;
	}
 
	a {
	color: #00a7a9;
	text-decoration: underline;
	}
 
	strong, b {
		font-weight: 700;
	}
 
	em, i {
		font-style: italic;
	}
 
	p, ul, ol, dl, table, blockquote {
		margin: 0 0 1em 0;
	}
 
	p {
		line-height: 1.5em;
	}
 
		p.medium {
			font-size: 1.4em;
		}
 
 
 
	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 700;
	}
 
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}
 
	h2 {
		font-size: 1.5em;
		padding: .5em 0em;
	}
 
	h3 {
		font-size: 1.25em;
	}
 
	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}
 
	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}
 
	hr {
		border-top: solid 1px #82b440;
		border: 0;
		margin-bottom: 1.5em;
	}
 
	blockquote {
		border-left: solid 0.5em #82b440;
		font-style: italic;
		padding: 1em 0 1em 2em;
	}
 
	section.special, article.special {
		text-align: center;
	}
 
	header.major {
		padding-bottom: 3em;
		text-align: center;
		text-transform: uppercase;
	}
 
		header.major h2 {
			font-size: 2.6em;
			font-weight: 700;
		}
 
		header.major .byline {
			display: block;
			padding-top: 1em;
			letter-spacing: 1px;
			font-size: 1.4em;
		}
 
	footer > :last-child {
		margin-bottom: 0;
	}
 
	footer.major {
		padding-top: 3em;
	}
 
/* Form */
 
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: none;
		border: solid 1px #82b440;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0.75em;
		text-decoration: none;
		width: 100%;
	}
 
		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		textarea:focus {
			border-color: #82b440;
		}
 
	input[type="text"],
	input[type="password"],
	input[type="email"] {
		line-height: 1em;
	}
 
	::-webkit-input-placeholder {
		color: inherit;
		opacity: 0.5;
		position: relative;
		top: 3px;
	}
 
	:-moz-placeholder {
		color: inherit;
		opacity: 0.5;
	}
 
	::-moz-placeholder {
		color: inherit;
		opacity: 0.5;
	}
 
	:-ms-input-placeholder {
		color: inherit;
		opacity: 0.5;
	}
 
	.formerize-placeholder {
		color: rgba(85, 85, 85, 0.5) !important;
	}
 
/* Image */
 
	.img {
		border: solid 2px #fca491;
		align: left;
	}
 
		.image.fit {
			display: block;
		}
 
			.image.fit img {
				display: block;
				width: 100%;
			}
 
		.image.feature {
			display: block;
			margin: 0 0 2em 0;
		}
 
			.image.feature img {
				display: block;
				width: 100%;
			}
 
/* Icon */
 
	.icon {
		position: relative;
	}
 
		.icon:before {
			content: "";
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}
 
		.icon > .label {
			display: none;
		}
 
/* Lists */
 
	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}
 
		ol.default li {
			padding-left: 0.25em;
		}
 
 
 
 
 
 
		ul.style1 li
		{
			padding: 0.55em 0em;
		}
 
 
		ul.style1 img
		{
			float: left;
			margin-right: 1em;
		}
 
 
 
 
 
 
 
		ul.default li {
			padding: 0.40em 0em;
		}
 
	ul.icons {
		cursor: default;
		padding-bottom: 0em;
	}
 
		ul.icons li {
			display: inline-block;
			line-height: 1em;
			padding: 0.5em 1em;
		}
 
			ul.icons li:first-child {
				padding-left: 0;
			}
 
			ul.icons li span {
				display: none;
			}
 
			ul.icons li a {
				text-decoration: none;
				font-size: 2em;
				color: inherit;
				opacity: 0.2;
				-moz-transition: all 0.35s ease-in-out;
				-webkit-transition: all 0.35s ease-in-out;
				-o-transition: all 0.35s ease-in-out;
				-ms-transition: all 0.35s ease-in-out;
				transition: all 0.35s ease-in-out;
			}
 
			ul.icons li a:hover {
				color: inherit;
				opacity: 1;
			}
 
	ul.actions {
		cursor: default;
	}
 
		ul.actions:last-child {
			margin-bottom: 0;
		}
 
		ul.actions li {
			display: inline-block;
			padding: 0 0 0 1.5em;
		}
 
			ul.actions li:first-child {
				padding: 0;
			}
 
		ul.actions.vertical li {
			display: block;
			padding: 1.5em 0 0 0;
		}
 
			ul.actions.vertical li:first-child {
				padding: 0;
			}
 
	ul.special-icons {
		margin: 0em;
		padding: 0em;
	}
 
		ul.special-icons > li {
			position: relative;
			padding: 0.50em 0em 0.50em 0em;
		}
 
		ul.special-icons > li:before {
			position: absolute;
			left: 0;
			top: 2em;
			display: block;
			background: none;
			font-size: 2em;
			border-radius: 5px;
		}
 
		ul.special-icons > li:first-child {
			border-top: none;
		}
 
		ul.special-icons h3 {
			margin-bottom: 0.80em;
			line-height: 2em;
			text-transform: uppercase;
			font-weight: 700;
			font-size: 1.2em;
		}
 
		ul.special-icons span {
			line-height: 190%;
		}
 
		ul.special-icons .fa {
			float: left;
			display: inline-block;
			padding-right: 1em;
			font-size: 1.4em;
			color: #82b440;
		}
 
		ul.special-icons p {
			padding-left: 2.7em;
		}
 
/* Tables */
 
	table {
		width: 100%;
	}
 
		table.default {
			width: 100%;
		}
 
			table.default tbody tr {
				border-bottom: solid 1px #82b440;
			}
 
			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}
 
			table.default th {
				font-weight: 700;
				padding: 0.5em 1em 0.5em 1em;
				text-align: left;
			}
 
			table.default thead {
				background: #555555;
				color: #fff;
			}
 
/* Button */
 
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: none;
		border-radius: none;
		border: 2px solid;
		border-color: #82b440;
		color: #82b440;
		cursor: pointer;
		display: inline-block;
		padding: 0.90em 1.2em;
		letter-spacing: 1px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 1.4em;
		-moz-transition: all 0.35s ease-in-out;
		-webkit-transition: all 0.35s ease-in-out;
		-o-transition: all 0.35s ease-in-out;
		-ms-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
	}
 
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		.button:hover {
			background: #82b440;
			color: white;
		}
 
		input[type="submit"].alt,
		input[type="reset"].alt,
		input[type="button"].alt,
		.button.alt {
			border-color: inherit;
			color: inherit;
		}
 
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="button"].alt:hover,
			.button.alt:hover {
				background: white;
				color: #82b440;
			}
 
		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		.button.fit {
			width: 100%;
		}
 
		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		.button.small {
			font-size: 0.8em;
		}
 
/* Wrapper */
 
	.wrapper {
		padding: 6em 0em 4em 0em;
	}
 
		.wrapper.style1 {
			padding: 0em;
			background: #222222 url(../images/banner.jpg) no-repeat;
			background-size: cover;
		}
 
		.wrapper.style2 {
			background: #f2f2f2;
		}
 
			.wrapper.style2 .major {
				text-align: left !important;
			}
 
				.wrapper.style2 .major h2 {
					display: block;
					margin-bottom: 0.70em;
					letter-spacing: 1px;
					line-height: 1.4em;
					text-transform: uppercase;
					font-size: 1.8em;
					font-weight: 400;
				}
 
				.wrapper.style2 .major .byline {
					letter-spacing: normal;
					line-height: 1.6em;
					text-transform: capitalize;
					font-size: 1.2em;
				}
 
			.wrapper.style2 h3 {
				display: block;
				margin-bottom: 1em;
				letter-spacing: 1px;
				line-height: 1.4em;
				text-transform: uppercase;
				font-size: 1.6em;
				font-weight: 400;
			}
 
		.wrapper.style3 {
			padding-bottom: 6em;
			background: #82b440;
			text-align: center;
			color: white;
		}
 
			.wrapper.style3 .container {
				padding-left: 6em;
				padding-right: 6em;
			}
 
			.wrapper.style3 p {
				font-size: 1.6em;
			}
 
		.wrapper.style4 {
			background: white;
		}
 
		.wrapper.style5 {
			background: #82b440;
			text-align: center;
			color: white;
		}
 
			.wrapper.style5 .image {
				display: block;
				width: 60%;
				margin: 0em auto 2em auto;
			}
 
				.wrapper.style5 .image img {
					border-radius: 50%;
					border: 10px solid;
					border-color: white;
				}
 
/* Header */
 
	#header {
		color: #00a7a9;
		height: 4em;
		background: #FFF;
	}
 
		#header .container {
			position: relative;
		}
 
	.homepage #logo {
		display: none;
	}
 
	.homepage #nav {
		position: static;
		right: none;
		text-align: center;
	}
 
	#logo {
		line-height: 2em;
		letter-spacing: 2px;
		text-transform: uppercase;
		font-size: 2em;
		font-weight: 400;
	}
 
		#logo h1 {
			display: inline-block;
			margin: 0;
			padding: 0;
		}
 
		#logo a {
			color: inherit;
		}
 
	#nav {
		position: absolute;
		top: 0;
		right: 0;
	}
 
		#nav > ul {
			margin: 0;
		}
 
			#nav > ul > li {
				border-radius: 3px;
				display: inline-block;
				margin-left: 0.4em;
				padding: 0 0.4em;
			}
 
				#nav > ul > li a {
					color: inherit;
					line-height: 4em;
					letter-spacing: 2px;
					text-decoration: none;
					text-transform: uppercase;
					font-weight: 400;
					font-size: 1em;
				}
 
				#nav > ul > li:first-child {
					margin-left: 0;
				}
 
				#nav > ul > li.active a {
					color: #fca491;
				}
 
				#nav > ul > li > ul {
					display: none;
				}
 
/* Dropotron */
 
	.dropotron {
		top: 2em;
		background: rgba(32, 32, 32, 0.75);
		border-radius: 4px;
		color: inherit;
		min-width: 12em;
		padding: 1em 0;
		color: white;
	}
 
		.dropotron > li {
			line-height: 2em;
			padding: 0 1em;
		}
 
			.dropotron > li > a {
				color: inherit;
				letter-spacing: 2px;
				text-decoration: none;
				text-transform: uppercase;
			}
 
			.dropotron > li.active > a, .dropotron > li:hover > a {
				color: inherit;
			}
 
		.dropotron.level-0 {
			border-radius: 0 0 4px 4px;
			font-size: 1em;
			margin-left: -0.5em;
		}
 
/* Banner */
 
	#banner {
		padding: 22em 0em 2em 0em;
		text-align: center;
		text-transform: uppercase;
		color: white;
	}
 
		#banner .container {
			padding: 1em 0em 2em 0em;
		}
 
		#banner h2 {
			display: inline-block;
			padding: 0.50em 0.30em;
			background: #82b440;
			font-size: 3em;
			font-weight: 400;
		}
 
		#banner span, #banner p {
			display: block;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-size: 1.6em;
			font-weight: 300;
		}
 
		#banner span {
			padding: 1em 0em;
		}
 
/* Main */
 
	#main {
		padding: 4em 0;
	}
 
		#main #content .major, #main #sidebar .major {
			text-align: left;
		}
 
		#main #sidebar section {
			margin-top: 4em;
		}
 
			#main #sidebar section:first-child {
				margin-top: 0;
			}
 
		#main #sidebar .major {
			padding-bottom: 2em;
		}
 
			#main #sidebar .major h2 {
				font-size: 1.8em;
			}
 
/* Footer */
 
	#footer {
		padding: 1em 0 1em 0;
		text-align: center;
		color: white;
	}
 
		#footer hr {
			border-bottom: 1px solid;
			border-color: inherit;
			opacity: .2;
		}
 
		#footer .major h2 {
			color: inherit;
		}
 
		#footer .major .byline {
			color: inherit;
			opacity: .4;
		}
 
		#footer .copyright {
			margin-top: 1em;
			text-align: center;
		}
 
/* Copyright */
 
	#copyright {
		position: relative;
		text-transform: uppercase;
		text-align: center;
		padding: 1em 0em 1em 0em;
		color: inherit;
		opacity: .40;
	}
 
		#copyright a {
			text-decoration: none;
			color: inherit;
		}
 
/* Extra */
 
	#extra1 h2 {
		display: block;
		margin-bottom: 1em;
		letter-spacing: 1px;
		line-height: 1.4em;
		text-transform: uppercase;
		font-size: 1.8em;
		font-weight: 400;
	}
 
	#extra1 h3 {
		display: block;
		margin-bottom: 1em;
		letter-spacing: 1px;
		line-height: 1.4em;
		text-transform: uppercase;
		font-size: 1.6em;
		font-weight: 400;
	}
 
/* Team */
 
	#team h3 {
		margin-bottom: 0.50em;
		letter-spacing: 2px;
		text-transform: uppercase;
		font-weight: 700;
	}

there are also other style sheets.
this one says skel.css

/* Resets (<a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a> | v2.0 | 20110126 | License: none (public domain)) */
 
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
 
/* Box Model */
 
	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
 
/* Container */
 
	body {
		/* min-width: (containers) */
		min-width: 1200px;
	}
 
	.container {
		margin-left: auto;
		margin-right: auto;
 
		/* width: (containers) */
		width: 1200px;
	}
 
	/* Modifiers */
 
		.container.small {
			/* width: (containers) * 0.75; */
			width: 850px;
		}
 
		.container.big {
			width: 100%;
 
			/* max-width: (containers) * 1.25; */
			max-width: 1500px;
 
			/* min-width: (containers); */
			min-width: 1200px;
		}
 
/* Grid */
 
	.\31 2u { width: 100% }
	.\31 1u { width: 91.6666666667% }
	.\31 0u { width: 83.3333333333% }
	.\39 u { width: 75% }
	.\38 u { width: 66.6666666667% }
	.\37 u { width: 58.3333333333% }
	.\36 u { width: 50% }
	.\35 u { width: 41.6666666667% }
	.\34 u { width: 33.3333333333% }
	.\33 u { width: 25% }
	.\32 u { width: 16.6666666667% }
	.\31 u { width: 8.3333333333% }
	.\-11u { margin-left: 91.6666666667% }
	.\-10u { margin-left: 83.3333333333% }
	.\-9u { margin-left: 75% }
	.\-8u { margin-left: 66.6666666667% }
	.\-7u { margin-left: 58.3333333333% }
	.\-6u { margin-left: 50% }
	.\-5u { margin-left: 41.6666666667% }
	.\-4u { margin-left: 33.3333333333% }
	.\-3u { margin-left: 25% }
	.\-2u { margin-left: 16.6666666667% }
	.\-1u { margin-left: 8.3333333333% }
 
	/* Rows */
 
		.row > * {
			float: left;
		}
 
		.row:after {
			content: '';
			display: block;
			clear: both;
			height: 0;
		}
 
		.row:first-child > * {
			padding-top: 0 !important;
		}
 
		/* Normal */
 
			.row > * {
				/* padding-left: (gutters) */
				padding-left: 40px;
			}
 
			.row + .row > * {
				/* padding: (gutters) 0 0 (gutters) */
				padding: 40px 0 0 40px;
			}
 
			.row {
				/* margin-left: -(gutters) */
				margin-left: -40px;
			}
 
		/* Flush */
 
			.row.flush > * {
				padding-left: 0;
			}
 
			.row + .row.flush > * {
				padding: 0;
			}
 
			.row.flush {
				margin-left: 0;
			}
 
		/* Quarter */
 
			.row.quarter > * {
				/* padding-left: (gutters * 0.25) */
				padding-left: 10px;
			}
 
			.row + .row.quarter > * {
				/* padding: (gutters * 0.25) 0 0 (gutters * 0.25) */
				padding: 10px 0 0 10px;
			}
 
			.row.quarter {
				/* margin-left: -(gutters * 0.25) */
				margin-left: -10px;
			}
 
		/* Half */
 
			.row.half > * {
				/* padding-left: (gutters * 0.5) */
				padding-left: 20px;
			}
 
			.row + .row.half > * {
				/* padding: (gutters * 0.5) 0 0 (gutters * 0.5) */
				padding: 20px 0 0 20px;
			}
 
			.row.half {
				/* margin-left: -(gutters * 0.5) */
				margin-left: -20px;
			}
 
		/* One and (a) Half */
 
			.row.oneandhalf > * {
				/* padding-left: (gutters * 1.5) */
				padding-left: 60px;
			}
 
			.row + .row.oneandhalf > * {
				/* padding: (gutters * 1.5) 0 0 (gutters * 1.5) */
				padding: 60px 0 0 60px;
			}
 
			.row.oneandhalf {
				/* margin-left: -(gutters * 1.5) */
				margin-left: -60px;
			}
 
		/* Double */
 
			.row.double > * {
				/* padding-left: (gutters * 2) */
				padding-left: 80px;
			}
 
			.row + .row.double > * {
				/* padding: (gutters * 2) 0 0 (gutters * 2) */
				padding: 80px 0 0 80px;
			}
 
			.row.double {
				/* margin-left: -(gutters * 2) */
				margin-left: -80px;
			}

and here is the last one that is called narrower.css:

/* Basic */
 
	#skel-layers-wrapper {
		padding-top: 44px;
	}
 
	p {
		line-height: 1.8em;
	}
 
	header.major h2 {
		font-size: 1.8em;
	}
 
	header.major .byline {
		font-size: 1.1em;
	}
 
/* Button */
 
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		display: block;
		width: 100%;
		max-width: 350px;
		margin: 0em auto;
		font-size: 1em;
		font-weight: 600;
	}
 
	.wrapper.style2 {
		background: #f2f2f2;
		text-align: center;
	}
 
		.wrapper.style2 .major {
			text-align: center !important;
		}
 
			.wrapper.style2 .major h2 {
				font-size: 1.4em;
			}
 
			.wrapper.style2 .major .byline {
				font-size: 1em;
			}
 
		.wrapper.style2 h3 {
			font-size: 1.2em;
		}
 
	.wrapper.style3 .container {
		padding-left: 1em;
		padding-right: 1em;
	}
 
	.wrapper.style3 p {
		font-size: 1em;
	}
 
	.wrapper.style4 {
		padding-bottom: 2em;
	}
 
	.wrapper.style5 {
		padding-bottom: 4em;
	}
 
		.wrapper.style5 img {
			width: 30%;
		}
 
/* Header */
 
	#header {
		display: none;
	}
 
/* Layers */
 
	#titleBar {
		background: #000;
		height: 44px;
		line-height: 44px;
	}
 
		#titleBar .title {
			display: block;
			position: relative;
			letter-spacing: 2px;
			line-height: 44px;
			font-size: 1.3em;
			font-weight: 700;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
			z-index: 1;
		}
 
		#titleBar .toggle {
			height: 60px;
			left: 0;
			position: absolute;
			top: 0;
			width: 80px;
			z-index: 2;
		}
 
			#titleBar .toggle:before {
				content: "\f0c9";
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}
 
			#titleBar .toggle:before {
				background: none;
				color: white;
				display: block;
				height: 44px;
				line-height: 44px;
				text-align: center;
				width: 44px;
			}
 
			#titleBar .toggle:after {
				background: url("images/toggle.svg") 0px 0px no-repeat;
				content: '';
				display: block;
				height: 13px;
				left: 10px;
				opacity: 0.75;
				position: absolute;
				top: 15px;
				width: 20px;
			}
 
	#navPanel {
		background: #000;
	}
 
		#navPanel .link {
			border-top: solid 1px rgba(0, 0, 0, 0.15);
			color: #888;
			display: block;
			height: 44px;
			line-height: 44px;
			padding: 0 1em 0 1em;
			text-decoration: none;
		}
 
			#navPanel .link:first-child {
				border-top: 0;
			}
 
			#navPanel .link.depth-0 {
				color: #fff;
			}
 
			#navPanel .link .indent-1 {
				display: inline-block;
				width: 1em;
			}
 
			#navPanel .link .indent-2 {
				display: inline-block;
				width: 2em;
			}
 
			#navPanel .link .indent-3 {
				display: inline-block;
				width: 3em;
			}
 
			#navPanel .link .indent-4 {
				display: inline-block;
				width: 4em;
			}
 
			#navPanel .link .indent-5 {
				display: inline-block;
				width: 5em;
			}
 
/* Banner */
 
	#banner {
		padding: 6em 0em 3em 0em;
		text-align: center;
		text-transform: uppercase;
		color: #FFF;
	}
 
		#banner .container {
			padding: 0em 1em;
		}
 
		#banner h2 {
			padding: 0.50em 0.50em;
			font-size: 1.8em;
		}
 
		#banner span, #banner p {
			font-size: 1.1em;
		}
 
		#banner span {
			padding: 1em 0em;
		}

thank you thank you to anyone who can help! trying to learn but it is frustrating!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Link?

Can you give us a link? At first glance, I'd judge the author of your theme/template to be less than knowledgeable about html and css. My clues? the whole reset thing is simply stupid. The grid system is even dumber. More evidence of poor coding? The misuse of class tokens. If it's there, I missed seeing any proper coding for response to viewport size. Is it in one of the js scripts? If so, that is beyond stupid. There are a lot of theme/template authors who are simply predators, and newbies are the prey.

If we can see the page in action, it will be easier to suss out the correctable issues.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.