I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute positioning with left in pixels or percentages, while others recommend using margins - although that seems to space out all the other buttons. Any ideas on how to achieve this? I hope I've explained the issue clearly.
<head>
<title>MorganaWhite|About Me</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">
<link rel="stylesheet" type="text/css" href="about.css">
<style>
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: 700px;
}
.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;
margin-left: 11%;
margin-top: 12%;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
@media screen and (max-width: 750px) {
.header {height: 300px;}
ul li {margin-top: 0%;}
ul li { }
}
@media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
ul li {margin-top: 0%;}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
@media screen and (max-width: 750px) {
.header {height: 300px;}
ul li {margin-top: 0%;}
}
@media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
ul li {margin-top: 0%;}
.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;
}
ul li {margin-top: 0%;}
}
</style>
</head>
<body>
<div class="header">
<h1>WHO I AM</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="#middle"><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>MY LIFE</strong></a></li>
<li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
<li><a href="#middle"><strong>RESUME</strong></a></li>
<li><a href="about.html"><strong>ABOUT ME</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 © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
<a href="#">Link</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms<span class="mobile-terms"> of Service</span></a>
</div>
</div>