How to make a grid reponsive? - css

Question

I have created a website and i am unable to make the tiled layout responsive. I am a beginner and i have no idea how to make my website responsive. Any help will be appreciated. The css and html is given below. Plus the background is repeating itself 3 times while i have added no repeat property in css.
HTML
<div class="grid">
<div class="tile hvr-reveal " id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
Contact Us
</strong>
<img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile2">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Products
</strong>
<img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal " id="tile3">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Partners
</strong>
<img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile4">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
About Us
</strong>
<img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/>
</p>
</div>
</div>
</div>
</div>
CSS
body {
font-family: chewy;
color: #ffffff;
background-image: url(pictures%20for%20web/bg3.jpg) ;
background-position: center center;
background-attachment: fixed;
background-size: cover;
**strong text**background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.grid {
width: 1140px;
height: 650px;
margin: auto;
}
.tile {
position: absolute;
width: 200px;
left: 451px;
top: 152px;
height: 152px;
box-sizing: border-box;
}
#tile1 {
top: 407px;
left: 754px;
width: 338px;
height: 196px;
margin-left: 2px;
margin-right: 2px;
background-color: #ff3300;
}
#tile2 {
margin-left: 2px;
margin-right: 2px;
top: 100px;
left: 980px;
width: 148px;
height: 154px;
background-color: #008000;
}
#tile3 {
top: 255px;
left: 523px;
width: 200px;
height: 150px;
background-color: #660066 ;
margin-left: 2px;
margin-right: 2px;
}
#tile4 {
top: 255px;
left: 118px;
width: 200px;
height: 150px;
background-color: #990000;
margin-left: 2px;
margin-right: 2px;
}

Answer 1

I'm guessing you want something like this:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
top: 0;
left: 0;
width: 90%;
height: auto;
margin-left: 5%;
background-color: #444;
display: block;
text-align: center;
}
.box {
border: solid 1px #000;
height: 200px;
width: 200px;
display: inline-block;
margin: 25px auto;
}
.box:nth-of-type(1){
background: yellow;
}
.box:nth-of-type(2){
background: red;
}
.box:nth-of-type(3){
background: blue;
}
.box:nth-of-type(4){
background: green;
}
Which will keep the boxes aligned and depending on the width of the browser, shifts them.
http://codepen.io/DB1500/pen/JGqaBZ