Issue
I put an image inside a responsive CSS grid and it looks fine only in mobile view but in desktop view the images overlap each another.
.posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
grid-auto-rows: auto;
margin: 0;
max-width: 1000px;
gap: 20px;
}
.posts * {
box-sizing: border-box;
}
.post {
font-family: montserrat;
text-decoration: none;
color: #000;
margin: 2.5px 5px;
width: 280px;
}
.postthumb {
width: 280px;
height: 200px;
margin: 0;
}
.posttitle {}<div class="grids">
<main>
<div class="posts">
<a href="#" target="_blank" class=post>
<img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb">
<h3 class="posttitle">Hello World is the title of this Post</h3>
</a>
<a href="#" target="_blank" class=post>
<img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb">
<h3 class="posttitle">Hello World is the title of this Post</h3>
</a>
</div>
</main>
</div>Solution
The issue is: .postthumb { width: 280px; }
That line overwrites the width of the image and making it possibly larger then the grid-column. As such the images overlap when the column is smaller then 280px.
Same goes for .post { width: 280px; } this will extend the ehader line possibly alrger then the grid-column and overlap the heading.
.posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
grid-auto-rows: auto;
margin: 0;
max-width: 1000px;
gap: 20px;
}
.posts * {
box-sizing: border-box;
}
.post {
font-family: montserrat;
text-decoration: none;
color: #000;
margin: 2.5px 5px;
}
.postthumb {
height: 200px;
margin: 0;
}
.posttitle {}<div class="grids">
<main>
<div class="posts">
<a href="#" target="_blank" class=post>
<img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb">
<h3 class="posttitle">Hello World is the title of this Post</h3>
</a>
<a href="#" target="_blank" class=post>
<img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb">
<h3 class="posttitle">Hello World is the title of this Post</h3>
</a>
</div>
</main>
</div>Answered By – tacoshy
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0