I am trying to make my text -movies , tv shows , games responsive . what should I do? I tried media query but I think I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Papaya | Home</title>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style type="text/css">
.bg {
width: 100%;
height: 110%;
position: absolute;
top: 0;
left: 0;
z-index: -4000;
}
body{
font-family: 'Luckiest Guy', cursive;}
a:hover {color: red;}
a { text-decoration: none; color:white; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
#one {
position: fixed;
top:180px;
left:200px;
}
#two {
position: fixed;
top:180px;
left:570px;
}
#three {
position: fixed;
top:180px;
left:900px;
}
h1{font-size:70px}
}
</style>
</head>
<body >
<div id="one">
<h1><a href="movies.html" style="text-decoration:none">MOVIES</a></h1></div>
<div id="two">
<h1><a href="games.html" style="text-decoration:none">GAMES</a></h1></div>
<div id="three">
<h1><a href="tvshows.html" style="text-decoration:none">TV SHOWS</a></h1></div>
<div align="center"><img src="images/ball.jpg" class="bg" alt="LOADING.."></div>
</body>
</html>
First of all, write HTML and CSS n separate files. It's considered best practice in web development ;) Then, the best way to add responsiveness to a website is to have Bootstrap installed. Copy and past this to the head of your html document:
This is a CDN (Content Delivery System) link. It will pull the bootstrap features from their website and allow you to add responsiveness to your site.
Here is the Bootstrap documentation link:
http://getbootstrap.com/getting-started/
My answer might seem a little long and complicated, but it's not. This is how professionals and companies make modern, responsive websites today! Hope this helps.