Jump to content

Weird space appearing on the right

Stefany93

By Stefany93
in CSS Help

 Share

Recommended Posts

Stefany93 Regular Member

Stefany93

Posted
Posted (edited)

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.

Edited by Stefany93
Link to comment
https://forums.phpfreaks.com/topic/289180-weird-space-appearing-on-the-right/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.