Question posted in 
So I designed my website in Photoshop and now trying to code it. I am have trouble trying to make the “newest game” and “Most Played” along with there images below be able to look the same when on different screen sizes. I have tried learning a little responsive design but I am having trouble. Can anyone help or even just suggest somethings.
Here is my Photoshop design: https://gyazo.com/82446b1cb2abc56fd5c08cd8e8df75fb
Here is my code:
HTML
<html>
<head>
<meta charset="utf-8">
<!-- Set the title -->
<title>Home</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<img class="top" src="images/Top.png" alt="Home"/>
<div class="header">
<!--style="width: 110px; height: 25;"-->
<!--<h1 align="center">Welcome To</h1> -->
<img id="logo" src="images/Home.png" alt="Logo" />
</div>
<div class="newgame">
<h1>NEWEST GAME</h1>
<img src="images/GameHere.png" alt="Game" />
</div>
<div class="most">
<h1>MOST PLAYED</h1>
<img src="images/GameHere.png" alt="Game" />
</div>
</head>
<body>
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- The news update feed -->
<div class="blogs">
<!-- The title of the post -->
<h1>Welcome To My</h1>
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
</div>
<!-- The post itself -->
<div class="post">
<p>This is just some random text about random stuff how this works. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<span>© Test</span>
</footer>
</body>
</html>
My CSS
body {
/*background-image: url(../images/home.jpg);*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
padding: 0px;
margin: 0px;
text-align: center;
background-color: lightgrey;
font-size: 16px;
}
img {
max-width: 100%;
}
.header {
color: orange;
font-size: 1.87em;
font-weight: 100;
line-height: 0.625em;
margin: 0px;
background-size: cover;
margin-top: inherit;
}
.top {
width: 800px;
height: 240px;
margin: 0px;
}
/* Centering the logo */
.header img {
display: block;
margin:auto;
width: 400px;
height: 90px;
padding: 0;
position: absolute;
left: 550px;
top: 100px;
}
/* Newst Game */
.newgame h1 {
font: bold 100px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
position: absolute;
left: 10px;
top: 0px;
font-size: 2.813em;
margin: 0px;
}
.newgame img {
position: absolute;
left: 2%;
top: 70px;
width: 300px;
height: 200px;
}
/* Most Played */
.most h1{
font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
position: absolute;
left: 1500px;
left: 78%;
top: 0px;
font-size: 2.8em;
margin: 0px;
}
.most img {
position: absolute;
left: 78%;
top: 70px;
width: 300px;
height: 200px;
}
/* Navigation bar */
.nav {
/*width: 510px;*/
margin: auto;
list-style: none;
display: table;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width of each element */
width: 150px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 1.5em;
/* This removes the underline remove the text */
text-decoration: none;
}
/* Change the color of links on hover */
.nav li a:hover:not(.active) {
background-color: orange;
}
/* Change the color of the link that is active */
.active {
background-color: darkorange;
}
/*The News Feed*/
.blogs {
margin: 20px auto;
border: 2px solid #000000;
background-color: #00B3FF;
padding: 0px 5px 5px 10px;
width: 70%;
width: 800px;
}
.blogs h1 {
font-family: 'Handlee', cursive;
font-size: 1.8em;
color: black;
text-align: center;
padding: 0px;
margin: 0px;
}
.info ul {
/* Removes the dots form the list */
list-style-type: none;
padding-left: 0.1em;
}
/*
.info li {
Put the text on one line
float: left;
text-align: center;
display: block;
}
*/
/* Info is that date */
.info p {
display: inline;
font-size: 0.93em;
text-align: justify;
font-style: normal;
font-weight: 200;
line-height: 1.1em;
margin: 0px;
}
.post p {
padding: 0;
margin: 0;
margin-bottom: 10px;
border-radius: 10px;
text-align: left;
}
.blogs {
padding: 5px;
margin-bottom: 10px;
border-radius: 10px;
}
2
Answers
Add this to your css:
This is basically an
.img-responsiveclass from Bootstrap, if you’re using Bootstrap, add.img-responsiveclass to your images.You can do media queries. With this you can fire certain css-sytles at certain screen widths and heights.
For example:
Also you should code the most properties in percentage instead of using pixels (e.g. width: 50%; instead of width: 300px;). But I think the best way to develope responisve websites is to use Bootstrap.