I've recently constructed a website but I'm struggling to make the tiled layout responsive. As a novice in web development, I'm unsure of how to proceed with making my site adaptable across different devices. Any guidance or assistance on this issue would be highly appreciated. Additionally, I've encountered a problem where the background image is repeating itself three times despite implementing the 'no-repeat' property in my CSS code.
HTML
<div class="grid">
<div class="tile hvr-reveal" id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
<a href="Contact.html" style="text-decoration:none">Contact Us</a>
</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>
<a href="products.html" style="text-decoration:none">Products</a>
</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>
<a href="partners.html" style="text-decoration:none">Partners</a>
</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>
<a href="ABOUTUS.HTML" style="text-decoration:none">About Us</a>
</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;
background-repeat: no-repeat; /* Issue arises due to errant double asterisks */
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;
}