No replies
RukzOG
RukzOG's picture
Offline
newbie
Last seen: 6 years 3 days ago
Timezone: GMT-5
Joined: 2014-08-07
Posts: 1
Points: 2

Alright so Im getting content on the side of my page cut off when I resize my page on my desktop browser.

This is what my page looks like when its normal. http://gyazo.com/dedab68fd110b484e64e4500b5e58523

Then I resize my page to make it thinner and I get this when I scroll to the right http://gyazo.com/cc0234a8463431253c57f172af8749f3

It cuts off my content

How do I fix this? Any help would be greatly appreciated! Thanks

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="PeakLanding.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
 
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
 
</head>
<body>
<div id="header-wrapper">
	<div id="header" class="container">
		<div id="logo">
			<span class="icon icon-fire"></span>
			<h1><a href="#">Back-to-Basics</a></h1>
 
		<div id="menu">
			<ul>
				<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
				<li><a href="#" accesskey="2" title="">What you get</a></li>
				<li><a href="#" accesskey="3" title="">Food Products</a></li>
				<li><a href="#" accesskey="4" title="">Exercise Equipment</a></li>
				<li><a href="#" accesskey="5" title="">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>
</div>
 
<div id="wrapper3">
	<div id="portfolio" class="container">
<div class="title">
			<h2>Whats included</h2>
			<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span> </div>
		<div class="column1">
			<div class="box"> <a href="#"><img src="images/scr01.jpg" alt="" class="image image-full" /></a>
				<h3>Two Nutrition DVD'S</h3>
				<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
				 </div>
		</div>
		<div class="column2">
			<div class="box"> <a href="#"><img src="images/scr02.jpg" alt="" class="image image-full" /></a>
				<h3>Jump Rope Cardio</h3>
				<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				 </div>
		</div>
		<div class="column3">
			<div class="box"> <a href="#"><img src="images/scr03.jpg" alt="" class="image image-full" /></a>
				<h3>Upper and Lower Body</h3>
				<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
				 </div>
		</div>
		<div class="column4">
			<div class="box"> <a href="#"><img src="images/scr04.jpg" alt="" class="image image-full" /></a>
				<h3>Abdominals</h3>
				<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
				 </div>
		</div>
 
	<div class="peaklogo"> <img src="images/peak.png"></div>
 
	</div>
 
 
 
 
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div id="wrapper1">
	<div id="welcome" class="container">
		<div class="title">
			<h2>Get real results!</h2>
			<span class="byline">Im living proof! If I can do it, so can you!</span> </div>
		<div class="content">
			<p>This is <strong>Fervency</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun <img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> </p>
			<a href="#" class="button">ORDER HERE</a> </div>
	</div>
</div>
 
 
 
 
 
 
 
 
 
 
<div id="wrapper5">
 
 
<div id="copyright">
	<p>&copy; Freaky50 Fitness LLC All rights reserved. | Read Our <a href="http://fotogrph.com/">Terms of Service</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
</div>
</body>
</html>

My CSS

html, body
	{
		height: 100%;
		width: 100%;
	}
 
	body
	{
		margin: 0px;
		padding: -5px;
		background:#EDEDED;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 12pt;
		font-weight: 400;
		color: #000000;
	}
 
 
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
	}
 
	p, ol, ul
	{
		margin-top: 0;
	}
 
	ol, ul
	{
		padding: 0;
		list-style: none;
	}
 
	p
	{
		line-height: 180%;
	}
 
	strong
	{
	}
 
	a
	{
		color: #0000FF;
	}
 
	a:hover
	{
		text-decoration: none;
	}
 
 
	.container
	{
		margin: 0px auto;
		width: 1200px;
	}
 
 
/*********************************************************************************/
/* Form Style                                                                    */
/*********************************************************************************/
 
		form
		{
		}
 
			form label
			{
				display: block;
				text-align: left;
				margin-bottom: 0.5em;
			}
 
			form .submit
			{
				margin-top: 2em;
				background: #B03500;
				line-height: 1.5em;
				font-size: 1.3em;
			}
 
			form input.text,
			form select,
			form textarea
			{
				position: relative;
				-webkit-appearance: none;
				display: block;
				border: 0;
				background: #fff;
				background: rgba(255,255,255,0.75);
				width: 100%;
				border-radius: 0.50em;
				margin: 1em 0em;
				padding: 1.50em 1em;
				box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
				border: solid 1px rgba(0,0,0,0.15);
				-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;
				font-family: 'Source Sans Pro', sans-serif;
				font-size: 1em;
				outline: none;
			}
 
				form input.text:hover,
				form select:hover,
				form textarea:hover
				{
				}
 
				form input.text:focus,
				form select:focus,
				form textarea:focus
				{
					box-shadow: 0 0 2px 1px #E0E0E0;
					background: #fff;
				}
 
				form textarea
				{
					min-height: 12em;
				}
 
				form .formerize-placeholder
				{
					color: #555 !important;
				}
 
				form ::-webkit-input-placeholder
				{
					color: #555 !important;
				}
 
				form :-moz-placeholder
				{
					color: #555 !important;
				}
 
				form ::-moz-placeholder
				{
					color: #555 !important;
				}
 
				form :-ms-input-placeholder
				{
					color: #555 !important;
				}
 
				form ::-moz-focus-inner
				{
					border: 0;
				}
 
 
/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/
 
	.image
	{
		display: inline-block;
		border: 1px solid rgba(0,0,0,.1);
	}
 
	.image img
	{
		display: block;
		width: 100%;
	}
 
	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 3em 0;
	}
 
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
 
	.image-centered
	{
		display: block;
		margin: 0 0 2em 0;
	}
 
	.image-centered img
	{
		margin: 0 auto;
		width: auto;
	}
 
/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/
 
	ul.style1
	{
	}
 
 
/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/
 
	ul.contact
	{
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}
 
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1.2em;
	}
 
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
 
	ul.contact li a
	{
		color: #FFF;
	}
 
	ul.contact li a:before
	{
		display: inline-block;
		background: #333333;
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #FFFFFF;
	}
 
 
/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/
 
	.button
	{
		display: inline-block;
		margin-top: 2em;
		padding: 1em 2em 1em 2em;
		background: #C80000;
		letter-spacing: 0.20em;
		line-height: 1.8em;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1.2em;
		color: #FFF;
	}
 
	.button:before
	{
		display: inline-block;
		background: #C80000;
		margin-right: 1em;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #272925;
	}
 
	.button-small
	{
		padding: 0.9em 2em;
		line-height: 1.8em;
		font-size: 1em;
	}
 
/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/
 
	.title
	{
		margin-bottom: 3em;
	}
 
	.title h2
	{
		font-size: 2.8em;
		color: rgba(255,255,255,0.9);
	}
 
	.title .byline
	{
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1.1em;
		color: #6F6F6F;
	}
 
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/
 
	#header-wrapper
	{
		overflow: hidden;
		padding: 5em 0em;
		background: #D80000 url(images/overlay.png) repeat;
	}
 
	#header
	{
	}
 
/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/
 
	#logo
	{
		padding: 5em 0em;
		text-align: center;
	}
 
	#logo h1
	{
		font-size: 3.5em;
	}
 
	#logo a
	{
		text-decoration: none;
		color: #FFF;
	}
 
	#logo span
	{
		letter-spacing: 0.10em;
		text-transform: uppercase;
		font-size: 0.90em;
		color: rgba(255,255,255,0.5);
	}
 
	#logo span a
	{
		color: rgba(255,255,255,0.8);
	}
 
	#logo .icon
	{
		font-size: 4em;
		color: rgba(255,255,255,1);
	}
 
 
 
/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/
 
	#menu
	{
		width: 80%;
		margin: 0px auto;
	}
 
	#menu ul
	{
		text-align: center;
	}
 
	#menu li
	{
		display: inline-block;
	}
 
	#menu li a, #menu li span
	{
		display: inline-block;
		margin-left: 0.50em;
		padding: 1.5em 1.5em;
		letter-spacing: 0.20em;
		text-decoration: none;
		font-size: 0.90em;
		font-weight: 600;
		text-transform: uppercase;
		outline: 0;
		color: #FFF;
	}
 
	#menu li:hover a, #menu li.active a, #menu li.active span
	{
	}
 
	#menu .current_page_item a
	{
		color: #FFF;
	}
 
 
 
 
	#peak {
 
display: inline-block;
		position: center;
		padding: 1.5em 1.5em;
 
	}
 
#peaklogo {
 
 
}
 
 
/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/
 
	#banner
	{
	}
 
/*********************************************************************************/
/* Wrapper                                                                       */
/*********************************************************************************/
 
	#wrapper1
	{
		background: #242424;
	}
 
	#wrapper2
	{
		background: #EDEDED;
	}
 
	#wrapper3
	{
		overflow: hidden;
		padding: 8em 0em;
		background: #EDEDED;
	}
 
	#wrapper4
	{
		overflow: hidden;
		padding: 8em 0em;
background: #242424;
	}
 
	#wrapper5
	{
 
	overflow: hidden;
		padding: 0em 0em;
		background: #242424;
 
	}
/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/
 
	#welcome
	{
		overflow: hidden;
		padding: 8em 0em;
		text-align: center;
		color: rgba(255,255,255,0.3);
	}
 
	#welcome .content
	{
		padding: 0em 8em;
	}
 
 
 
	#welcome a,
	#welcome strong
	{
		color: rgba(255,255,255,0.6);
	}
 
/*********************************************************************************/
/* Page                                                                          */
/*********************************************************************************/
 
	#page
	{
	}
 
/*********************************************************************************/
/* Content                                                                       */
/*********************************************************************************/
 
	#content
	{
	}
 
/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/
 
	#sidebar
	{
	}
 
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
 
	#footer
	{
		text-align: center;
	}
 
 
	#footer .title span
	{
		color: rgba(255,255,255,0.4);
 
 
 
	}
 
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/
 
	#copyright
	{
		overflow: hidden;
		padding: 5em 0em;
		border-top: 1px solid rgba(255,255,255,0.08);
	}
 
	#copyright p
	{
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: rgba(255,255,255,0.3);
	}
 
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,0.6);
	}
 
/*********************************************************************************/
/* Newsletter                                                                    */
/*********************************************************************************/
 
	#newsletter
	{
		overflow: hidden;
		padding: 8em 0em;
		background: #EDEDED;
		text-align: center;
	}
 
	#newsletter .title h2
	{
		color: rgba(0,0,0,0.8);
	}
 
	#newsletter .content
	{
		width: 600px;
		margin: 0px auto;
	}
 
/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/
 
	#portfolio
	{
	}
 
	#portfolio .box
	{
		text-align: center;
		color: rgba(0,0,0,0.5);
	}
 
	#portfolio h3
	{
		display: block;
		padding-bottom: 1em;
		text-transform: uppercase;
		font-size: 1em;
		color: rgba(0,0,0,0.6);
	}
 
	#portfolio .title
	{
		text-align: center;
	}
 
	#portfolio .title h2
	{
		color: rgba(0,0,0,0.8);
	}
 
	.column1,
	.column2,
	.column3,
	.column4
	{
		width: 282px;
	}
 
	.column1,
	.column2,
	.column3
	{
		float: left;
		margin-right: 24px;
	}
 
	.column4
	{
		float: right;
	}