CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Morgan
Morgan

Reputation: 115

how to eliminate the horizontal scrollbar?

I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.

here is my code:

<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
  background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
  background-size: 100%;
  background-color: white;
  margin: 0;
  padding: 0;
overflow-x: none; 
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;

}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;

}
h1 {
  position: absolute;
  top: 21%;
  left: 36%;
  color: white;
  font-family: Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
}
p {
  position: absolute;
  width: 600px;
  top: 720px;
  left: 310px;
  height: 25px;
  font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
 text-align: center;
line-height: 150%;
}

a {
color: white;
text-decoration:none;
}

ul li {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  top: 43%;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 90%;
  width: 150px;
  height: 40px;
}
ul li:link,
ul li:visited {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: white;
}
li {
  text-decoration: none;
  color: white;
}
ul li:hover,
ul li:active {
  background-color: white;
  color: black;
  text-decoration: none;
}

ul li a:hover, ul li a:active {
  background-color: white;
  color: black;
}  

ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: white;
  text-decoration: none;
}
ul {
margin-right: 10%;
}  

.wrapper {
  padding-top: 0%;
}



@media screen and (max-width: 300px) {

  .wrapper {
    padding-top: 40%;
  }

ul li{
   margin-left: 2px;
   margin-top: 5px;
   margin-bottom: 0px;
   width: 100px;
   height:35px;
   top: 480%;
  }
ul{
margin-top: 165px;
margin-left: 20px;
}
  h1{
    position:absolute;
    top: 120px;
    left: 150px;
    font-size: 19px;
 }
h2 {

    font-size: 20px;
    width: 200px; 
    left: 100px;
    top: 200px;
}

p {
    left: 30px;
    top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}

}

hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;

}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>

<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li>
<li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li>
<li><a href="about.html" class="me"><strong>ABOUT ME</strong></a></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br> 
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p> 
<hr>
<h3>Me In A Nutshell</h3> 
</body>

Upvotes: 1

Views: 86

Answers (2)

Rick Sibley
Rick Sibley

Reputation: 625

Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.

body {
	background-color: #e3e3e3;
	margin: 0 auto;
	padding: 0;
	font-family: Arial;
}
.header {
	background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	border: 1px solid #000;
	text-align: center;
	height: 400px;
	}
	
.mobilelinks {display: none;}

.wrapper {
	margin: 50px;
}

#footer {
	text-align: center;
}

#footer a {
	color: #666;
	margin-left: 8px;
}

#footer a:hover {
	color: #222;
	text-decoration: underline;
}

h1 {
	color: white;
	font-family: Arial;
	font-size: 72px;
	letter-spacing: 1px;
}
h2 {
	color: #525252;
	font-size: 36px;
	letter-spacing: 1px;
	text-align: center;

}
p {
	font-family: Gill Sans, sans-serif;
	color:#696969;
	font-size: 17px;
	text-align: center;
	line-height: 150%;
}
a {
	color: white;
	text-decoration:none;
}

ul li {
	text-align: center;
	line-height: 40px;
	display: inline-block;
	letter-spacing: 1px;
	background-color: rgba(5, 4, 2, 0.1);
	border: 2px solid white;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 90%;
	width: 150px;
	height: 40px;
}

ul li:hover {
	background-color: white;
}

ul li:hover > a {
	color: #000;
}
@media screen and (max-width: 750px) {
	.header {height: 300px;}
}
@media screen and (max-width: 500px) {
	h1 {
		font-size: 52px;
	}
	.links {display: none;}
	.mobilelinks {display: inline-block;}
}
@media screen and (max-width: 400px) {
	.header {height: 200px;}
	.mobile-terms { display: none;}
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 22px;
	}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
  </head>
<body>
	<div class="header">
		<h1>Morgan White</h1>
			<ul class="links">
				<li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
				<li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
				<li><a href="www.youtube.com"><strong>RESUME</strong></a></li>
				<li><a href="about.html"><strong>ABOUT ME</strong></a></li>
			</ul>
			<ul class="mobilelinks">
				<li><a href="www.youtube.com"><strong>BUTTON</strong></a></li>
			</ul>
	</div>
	<div id="mainwrapper">
		<div class="wrapper">
			<h2>Some Fun Facts</h2>
				<p>
				I made this website from scratch when I was 14, <br>
				I have a twin brother whose name is Pierson McNeal White, <br>
				I have a older brother and sister who are also twins, <br>
				I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
				and I watch the super bowl for the ads.
				</p>
		</div>
		<hr>
		<div class="wrapper">
			<h2>Me In A Nutshell</h2>
				<p>
				Other Crap Here.
				</p>
		</div>
	</div>
	<div id="footer">
            Copyright &copy;&nbsp;<script>document.write(new Date().getFullYear())</script>&nbsp;Morgan.
          <div>
            <a href="#">Link</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
          </div>
    </div>

Works on mobile devices.

Upvotes: 1

baao
baao

Reputation: 73271

Simply use

overflow-x: none;

for the horizontal scrollbar issue.

html {
  background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: none;  
}

Upvotes: 2

Related Questions