I am using single releated post below my content. But the picture is distorted in different sizes…
Screenshots;
g images
Here is css codes;
/* İlgili Kart */
.ilgili_karti {
background-color: white;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
border: 0 solid;
overflow: hidden;
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
-o-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
padding: 0;
}
.ilgili_karti_gorsel .img {
width: 220px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
height: 140px;
float: left;
text-align: center;
display: block;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.ilgili_karti_kategori a {
display: table-cell;
color: #999;
padding-top: 16px;
font: inherit;
}
.ilgili_karti_kategori a:hover {
color: #999;
}
.ilgili_karti_baslik {
font-size: 1.5em;
font-weight: bold;
color: #141412;
line-height: 1.5;
margin: 10px 15px 7px;
}
.ilgili_karti_baslik a {
box-shadow: none;
color: #141412;
text-decoration: none;
}
@media (max-width: 960px) {
.ilgili_karti_gorsel .img {
width: 100%;
padding-right: 0px;
}
.ilgili_karti_kategori a {
padding-left: 16px;
}
}
and website: http://www.sistemgereksinimleri.info (you can see for yourself, )
How can I fix that, any advice ?