Jump to content

Weird space appearing on the right

Stefany93

By Stefany93
in CSS Help

Recommended Posts

Stefany93 Regular Member

Stefany93

Posted
Posted

Howdy,

 

I am trying to create my website responsive. So far so good, but I got this weird white space on the right of my website and the user that is on a device smaller for 800px get a weird scroll bar. You can see it for yourself here, if you shrink the viewport to 800px or less - http://dyulgerova.info/mobile_dyulgerova/

 

Here is my responsive CSS

/* For 800 pixels wide screens, MAX WIDTH. For example, tablets */

@media all and (max-width: 800px){
/* All images */
	img {width:15vw;}
/* The header */	
	#header{
		background: #ff0000;
		width:100vw;
	}
	#section{
		width:100vw;
	}
	#SkypeButton_Call_age_of_empires3_1_paraElement{
		display:none;
	}
	#header_contact{
		position: absolute;
		top: 120px;
		left: 394px;
	}
	#logo{
		margin-top:20px;
		margin-left:0;
	}

	.langs{
		margin-top:54px;
		margin-right:50px;
	}
/* The nav  bar */
	#header #navigation{
		width:100vw;
		height: 6.5vw;
		position:fixed;
		top:-15px;
		background: #000;
		height:10;
	}	
	#header #navigation a{
		border-left:1px solid #ff0000;
	}
/* Below the header */
	#main_div{
		width:80vw;
	}

	footer{
		width:80vw;
	}
}

And here is my NON-RESPONSIVE CSS

* {margin: 0px; padding: 0px; }
body {
	color: #E0E0E0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	
	background: #9C1C6B;
	background: -webkit-radial-gradient(center top, circle, rgba(0,0,0,.2), rgba(0,0,0,.4)) fixed no-repeat, -webkit-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat;
	background: -moz-radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, -moz-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat;
	background: -o-radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, -o-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat;
	background: radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, linear-gradient(#9C1C6B, #CA278C) fixed no-repeat;
	background-size:contain, contain;
}
a, a:active, a:visited, a:hover{
	color: #FFE9E8;
}

h3 {
	margin-bottom:20px;
}

#header a, #header a:active, #header a:visited, #header a:hover{
	color: #000;
	text-decoration:none;
}
#header{
	width:100%;
	height:100%;
	background-color:#FFF;
	border-bottom:#F00 3px ridge;
	margin-bottom:50px;
	background-color:#FFF; 
	background: -webkit-linear-gradient(#F3F3F3, #f6f5f3);
	background: -moz-linear-gradient(#F3F3F3, #f6f5f3);
	background: -o-linear-gradient(#F3F3F3, #f6f5f3);
	background: linear-gradient(#F3F3F3, #f6f5f3);

}




#logo{
	margin-left:200px;
}
#header #section{
	color:#000;
	
	margin:auto;
}
#header #navigation{
	width:1000px;
	height:40px;
	margin:auto;
	clear:both;
}




#header #navigation li a{
	color:#999;
	border-bottom:rgba(0,0,0,0) 3px ridge;
	width:90px;
	line-height:40px;
	float:left;
	text-align:center;
	font-style:bold;
	font-weight:bold;
	transition:all .3s;
	-webkit-transition:all .3s;
}

#header #navigation li a:hover{
	color:#222;
	border-bottom:#000 3px ridge;
}
/* Makes a navigation item  bigger when applied the class 	*/
.long_nav{
	width: 176px;
}

footer a, footer a:active, footer a:visited, footer a:hover{
	color: #FFF;
	text-decoration:none;
}

figure{
	width:200px;
	height:133px;
	padding:10px;
	margin:10px;
	color:#000;
	text-align:left;
	font-size:12px;
	float:left;
	
	background: -webkit-radial-gradient(center top, circle, #FFFFFF, #DFDFDF);
	background: -moz-radial-gradient(center top, circle, #FFFFFF, #F3F3F3);
	background: -o-radial-gradient(center top, circle, #FFFFFF, #F3F3F3);
	background: radial-gradient(center top, circle, #FFFFFF, #DFDFDF);
}
ul {
	list-style-type: none;
}
ol {
	list-style-type: none;
}
li {
	margin-top: 10px;
}
hgroup{
	color:#FFF;
	padding:5px;
	border-left: #E47297 3px solid;
}
p {
	line-height: 180%;
}
fieldset {
	border: 0px currentColor;
}
img {
	border:0;
	max-width: 100%;
	height: auto;
/	width: 100%; /* Resizes automatically on any devise. */
}


input {
	margin: 10px; padding: 10px; border-radius: 20px; border: 0px currentColor; width: 300px; height: 30px;
}
textarea {
	padding: 10px; border-radius: 10px; border: 0px currentColor; margin-top: 5px;
}

#main_div {
	background-color:rgba(0,0,0,.01);
	margin:auto;
	width:1000px;
	padding:10px;
	clear:both;
	
	background: -webkit-linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.02));
	background: -moz-linear-gradient(rgba(0,0,0,.0), #f6f5f3);
	background: -o-linear-gradient(rgba(0,0,0,.0), #f6f5f3);
	background: linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.02));
}
footer{
	color:#CA278C;
	padding:10px;
	border-top:#FFF 2px solid;
	margin-top:20px;
	width:725px;
	padding:20px 23%;
	overflow:hidden;
	background-color:#000;
	height:100%;
}
footer #navigation{
	clear:both;
}
#bgDeco1{
	background-color:#000;
	position:absolute;
	bottom:30px;
	right:10px;
	width:150px;
	height:150px;
	border-radius:50% 50%;
	opacity:.4;
	
	transition:all 1s;
	-webkit-transition:all 1s;
}

#bgDeco2{
	background-color:#000;
	position:absolute;
	bottom:145px;
	right:25px;
	width:100px;
	height:100px;
	border-radius:50% 50%;
	opacity:.3;
	
	transition:all 1.5s;
	-webkit-transition:all 1.5s;
}

#bgDeco3{
	background-color:#000;
	position:absolute;
	bottom:210px;
	right:75px;
	width:80px;
	height:80px;
	border-radius:50% 50%;
	opacity:.2;
	
	transition:all 2s;
	-webkit-transition:all 2s;
}

#bgDeco4{
	background-color:#000;
	position:absolute;
	bottom:250px;
	right:75px;
	width:50px;
	height:50px;
	border-radius:50% 50%;
	opacity:.1;
	
	transition:all 2.5s;
	-webkit-transition:all 2.5s;
}

#bgDeco5{
	background-color:#000;
	position:absolute;
	bottom:250px;
	right:75px;
	width:75px;
	height:75px;
	border-radius:50% 50%;
	opacity:.25;
	
	transition:all 2.5s;
	-webkit-transition:all 2.5s;
}

#bgDeco6{
	background-color:#000;
	position:absolute;
	bottom:250px;
	right:75px;
	width:55px;
	height:55px;
	border-radius:50% 50%;
	opacity:.35;
	
	transition:all 2.5s;
	-webkit-transition:all 2.5s;
}

#SkypeButton_Call_age_of_empires3_1 {
	float: right;
}

#div_main {
	width: 590px;
}
#skills {
	font-size: 19px; margin-top: 40px; margin-bottom: 40px;
}
.portfolio {
	padding:14px;
	margin:14px 0;
	min-height:200px;
	border-left:#E47297 2px solid;
	clear:both;
	cursor:pointer;
	
	transition:all .3s;
	-webkit-transition:all .7s;
}
.portfolio:hover{
	background-color:rgba(255,255,255,.05);
}
#menu input{
	width: 149px;
	height: 16px;
}

#menu input[type="submit"]{
	padding-bottom: 25px;
}

#menu form{
	height:300px;
	border:1px solid red;
}

#menu {
	margin: 10px; padding: 10px; width: 200px; float: left;
}
#menu a {
	font-size: 18px; font-weight: bold; margin-top: 10px; margin-right: 10px; display: block;
}
#calendar_div {
	border: 1px solid black; width: 245px; float: left;
	overflow:hidden;
	
}
.buttons {
	padding-right: 10px; float: right;
}
#calendar {
	width: 210px; float: left;
	overflow:hidden;
}
#calendar tr > th {
	color: rgb(0, 0, 0); padding-right: 20px;
}
#article {
	padding: 10px; width: 490px; float: left;
	margin-bottom:40px;
	border-bottom:2px solid red;
}
#article p {
	text-indent: 20px;
}
#article h1 {
	border-left:#FFF 2px solid;
	color:#FFF;
	background-color:rgba(255,255,255,.15);
	padding:5px;
	 padding-left:10px;
	 margin:10px 0;
}
#article h4 {
	margin: 10px; color: pink;
}
#comment_form {
	margin: auto; width: 500px; overflow: hidden;
	
}
.comment {
	background: rgb(167, 211, 241); margin: 10px auto 30px; padding: 10px; border-radius: 10px; border: 1px solid red; width: 500px; height: auto; color: rgb(0, 0, 0); overflow: hidden;
}
h3.commentator {
	text-align: left;
}
#links {
	width: 400px;
	margin:auto;
}
#links li {
	padding-top: 10px;
}
.about {
	width: 1000px; overflow: hidden;
}
.about img {
	margin: 10px; overflow: hidden; float: left;
}
.about p {
	padding: 10px;
}
#contact_picture {
	width:500px;
	float:right;
}
#contact_info {
	float: right;
}
.red {
	margin: 10px; padding: 10px; width: 500px; height: auto; overflow: hidden; float: left;
}
#contact_form {
	padding: 10px; width: 477px; overflow: hidden;
}
.secret {
	display: none;
}
#uploading {
	padding: 10px; border: 1px solid red; width: 500px;
}
.wrong_answer {
	background: red; padding: 10px; border: 1px solid green; color: white;
}
.correct_answer {
	background: green; border: 1px solid orange;
}
label {
	display: block;
}

#secret{
	display:none;
}

/**********************************
	Blog
***********************************/
#category{
	float:right;
	margin:10px;
}
/* the class for the flags */
.langs{
	float:right;
	margin:15px;
	box-shadow: 6px 6px 15px #545454;
	-webkit-box-shadow: 6px 6px 15px #545454; /* Support for Chrome, Safari, iOS, Android */
	-moz-box-shadow: 6px 6px 15px #545454; /* Support for Mozilla -13 */
}

/*************************************
	WP Plugins
**************************************/
#single_plugin{
	width:590px;
	margin:10px;
	border-bottom: 1px solid orange;
}

And here is my HTML structure for the index.php file

<?php 
	include 'html/header.php';
?>
<!-- This ID holds the entire inner container for this page -->
	<div id="main_div">
		<h1>Hello World!</h1>
		<h3>My name is Stefany and I am from Bulgaria. I am a computer programmer and I create websites and web applications.</h3>
			<p id="skills">
				<strong>Programming languages:</strong> PHP, Perl 5, JavaScript
				<br />
				<strong>Front - end:</strong> HTML5, XHTML, CSS
				<br />
				<strong>Databases:</strong> MySQL, SQLite, MariaDB, MSSQL
				<br />
				<strong>Frameworks:</strong> CodeIgniter
				<br />
				<strong>E-commerce Platforms:</strong> osCommerce, UniqueFree
				<br />
				<strong>Other:</strong> XML, AJAX, JSON
				<br />
				<strong>Web Services:</strong> REST, SOAP
				<br />
				<strong>Content Management Systems:</strong> WordPress, Joomla
				<br />
				
				I can create forums, blogs, social networks, E - stores, portfolios, WordPress themes, plugin and 
				pretty much any type of website you can think of.
				<br />
				Please take a look at my portfolio below and if you are interested to hire me, please don't
				hesitate to <a href="contact">contact me!</a>
			</p>
		<h2>Portfolio</h2>
		<div class="portfolio">
			<h3><a href="http://tarsis-bg.com/" target="_blank"> Tarsis </a></h3>
			<a href="http://tarsis-bg.com/" target="_blank"><img src="images/project23.png" width="200" height="133" alt="Company website for selling flats" /></a>
				<p>
					Tarsis is a company that builds and sells flats in Sunny Beach, Bulgaria
					and I made their website on WordPress, including a custom made plugin
					that was used to build a separate CMS within WP for management of 
					the flats that are for sale.
					
					<br />
					Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, WordPress
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://ungerne.dk/" target="_blank"> Ungerne </a></h3>
			<a href="http://ungerne.dk/" target="_blank"><img src="images/project22.png" width="200" height="133" alt="Web-shop for selling kids' clothes" /></a>
				<p>
					Danish web-shop for selling kids' clothes, built on osCommerce. I made major core 
					modifications, such as fixes on the coupon, mail, search, shipping, product and shopping
					systems.
					<br />
					Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, osCommerce
				</p>
		</div>

		<div class="portfolio">
			<h3><a href="http://www.br-electronic.dk/" target="_blank"> Bramming Electronic </a></h3>
			<a href="http://www.br-electronic.dk/" target="_blank"><img src="images/project21.png" width="200" height="133" alt="Web-shop for selling electronics" /></a>
				<p>
					UniqueFree built Danish web-shop for selling electronics. Made core modifications
					in the shipping system.
					<br />
					Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, UniqueFree
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://babyfryd.dk/" target="_blank"> BabyFryd </a></h3>
			<a href="http://babyfryd.dk//" target="_blank"><img src="images/project20.png" width="200" height="133" alt="BabyFryd web-shop for selling kids' clothes" /></a>
				<p>
					Another Danish web-shop for selling children's clothes build on UniqueFree
					<br />
					Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, UniqueFree
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://iskampak.com" target="_blank"> Iskam Pak </a></h3>
			<a href="http://iskampak.com/" target="_blank"><img src="images/project19.png" width="200" height="133" alt="A website about Angry Birds" /></a>
				<p>
					Dating website made entirely from scratch without any
					frameworks with a custom CMS build into it.
					<br />
					It is currently a work in progress.
					<br />
					Technologies used: XHTML, CSS, JavaScript, PHP, MySQL
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://angrybirds.me/" target="_blank">Angry Birds </a></h3>
			<a href="http://angrybirds.me/" target="_blank"><img src="images/project18.png" width="200" height="133" alt="A website about Angry Birds" /></a>
				<p>
					A website where you can play the legendary game Angry Birds for free. <br />
					I made it with WordPress by tweaking a theme and installing plugins.
					<br />
					Technologies used: XHTML, CSS, WordPress, PHP
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://dyulgerova.info/nc/index.php" target="_blank"> Wallace & Hull LLP</a></h3>
			<a href="http://dyulgerova.info/nc/index.php" target="_blank"><img src="images/project17.png" width="200" height="133" alt="Project 12" /></a>
				<p>
					The homepage of <strong>"Wallace and Hull LLP"</strong> lawyer firm from Oregon, Washington.
					It's part of a WordPress theme I made.
					<br />
					Technologies used: HTML5, CSS3, WordPress
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://www.automirrorsexpress.com/" target="_blank"> Auto Mirrors Express</a></h3>
			<a href="http://www.automirrorsexpress.com/" target="_blank"><img src="images/project15.jpg" width="200" height="133" alt="Project 12" /></a>
				<p>
					E - shop for car mirrors. Created a tag cloud, fixed many
					DB issues and configured the server.
					<br />
					Technologies used: XHTML, CSS, PHP, JavaScript, Perl, osCommerce
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://www.autolightcenter.com/index.php" target="_blank"> Auto Lights Center</a></h3>
			<a href="http://www.autolightcenter.com/index.php" target="_blank"><img src="images/project14.jpg" width="200" height="133" alt="Project 12" /></a>
				<p>
					E - shop for car lights. Made some grand changes with the design, the
					entire back end code and the DB. Greatly increased the security.
					<br />
					Technologies used: XHTML, CSS, PHP, JavaScript, Perl, osCommerce
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://radiosean.co.uk/"> Radio Sean</a></h3>
			<a href="http://radiosean.co.uk/"><img src="images/project13.jpg" width="200" height="133" alt="Project 12" /></a>
				<p>
					Homepage of a British radio station.
					I created the search engine of the website.
					<br />
					Technologies used: XHTML, PHP
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="/portfolio/otto" target="_blank"> Otto Steininger</a></h3>
			<a href="http://www.ottosteininger.com/" target="_blank"><img src="images/project12.jpg" width="200" height="133" alt="Project 12" /></a>
				<p>
					Coming soon page for the website of an animator/illustrator professional.
					<br />
					Technologies used: XHTML, CSS, Javascript
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://freepic.eu/" target="_blank"> FreePic</a></h3>
			<a href="http://freepic.eu/" target="_blank"><img src="images/project11.png" width="200" height="133" alt="Project 11" /></a>
				<p>
					Free image hosting website. I created the GIF category,
					the admin panel and increased the security of the website.
					<br />
					Technologies used: XHTML, CSS, PHP, MySQL, GD
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://studyingthepast.com/" target="_blank"> Studying The Past</a></h3>
			<a href="http://studyingthepast.com/" target="_blank"><img src="images/project10.png" width="200" height="133" alt="Project 10" /></a>
				<p>
					A website about history. 100% XHTML 1.0 and CSS valid.
					<br />
					Technologies used: XHTML, CSS, PHP, SQLite
				</p>
		</div>
<!-- The "portfolio" class is a div that holds one website at a time. 
	That's why there are so many declarations of that div -->		
		<div class="portfolio">
<!-- The name of the website in a header element with a link to it -->		
			<h3><a href="http://sundaygolessons.com/" target="_blank">Sunday Go Lessons</a></h3>
<!-- And a picture of the website again with a link to it because it's cool to also have a screenshot beside
	just a super boring link, WOW -->
			<a href="http://sundaygolessons.com/" target="_blank"><img src="images/project9.png" width="200" height="133" alt="Project 9" /></a>
<!-- And a litte explanation as to what the website is the hell about. -->
				<p>
					A webshop for selling and renting <a href="https://www.usgo.org/what-go">Go</a>
					related books and videos, with integrated PayPal payment system.
					<br />
					Technologies used: XHTML, CSS, PHP, MySQL, PayPal
				</p>
		</div>
<!-- End of the previous website and now it's the turn of the next. The bragging continues... -->
		
		<div class="portfolio">
			<h3><a href="http://code-forums.info/" target="_blank"> PHP Forum</a></h3>
			<a href="http://code-forums.info/" target="_blank"><img src="images/project7.png" width="200" height="133" alt="Project 7" /></a>
				<p>
					A programming forum coded from scratch, without using any PHP frameworks or ready made stuff. 
					<a href="http://github.com/Stefany93/PHP-Forum">Source code.</a> 
					<br />
					Technologies used: XHTML, CSS, PHP, MySQL, JavaScript
				</p>
		</div>

		<div class="portfolio">
			<h3><a href="http://dyulgerova.info/project_blog/" target="_blank">Bulgarian newspapper</a></h3>
			<a href="http://dyulgerova.info/project_blog/" target="_blank"><img src="images/project6.png" width="200" height="133" alt="Project 2" /></a>
				<p>
					This project has been made half way and it is currently frozen.
					<br />
					Technologies used: XHTML, CSS, PHP, MySQL, JavaScript 
				</p>
		</div>
	
		<div class="portfolio">
			<h3><a href="http://www.bettercitiesforum.com/" target="_blank"> WordPress website about improving neighbourhoods</a></h3>
			<a href="http://www.bettercitiesforum.com/" target="_blank"><img src="images/project5.png" width="200" height="133" alt="Project 2" /></a>
				<p>
					I installed a Simple Machines Forum
					and made some tweaks on the source code as well on the site. 
					<br />
					Technologies used: WordPress, PHP
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="big_images/project4.png" target="_blank">Social Network</a></h3>
			<a href="big_images/project4.png" target="_blank"><img src="images/project4.png" width="200" height="133" alt="Project 2" /></a>
				<p>
					Including a forum, an individual learning module and an event calendar. 
					The social network is private for the residents anesthesiologists of the Texas Tech University
					<br />
					and therefore not in the public domain.
					I created it in twenty days from scratch.
					<br />
					Technologies used: HTML5, CSS, PHP, MySQL, JavaScript. 
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://chrisshilts.com/" target="_blank">Portfolio for a web designer.</a></h3>
			<a href="http://chrisshilts.com/" target="_blank"><img src="images/project3.jpg" width="200" height="133" alt="Project 2" /></a>
				<p>
					Basically I made the blog page with a custom Content Management System including an Admin panel.
					<br />
					Technologies used: PHP, MySQL, JavaScript. 
				</p>
		</div>
		<div class="portfolio">
			<h3><a href="http://www.borsp.com/sandh/dazer/" target="_blank"> E - Shop</a></h3>
			<a href="http://www.borsp.com/sandh/dazer/" target="_blank"><img src="images/project2.jpg" width="200" height="133" alt="Project 2" /></a>
				<p>
					I made the front - end and my colleague made the back - end. It's in a process of being uploaded.
					<br />
					Techologies used: XHTML, CSS, JavaScript. 
				</p>
		</div>
		
	</div>
<?php
	include 'html/footer.php'; 
?>

Please help me!

 

 

I managed to fix the problem with "overflow-x:hidden" property of "body" in CSS, but I do believe this is way too wrong.

Link to comment
https://forums.phpfreaks.com/topic/289180-weird-space-appearing-on-the-right/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.