Images disappear when on certain mobile devices

Question

So I've recently completed my website and have seen that the two images on my home don't show up on certain mobile devices. I'm not to sure why. In any case here the code is below. You can also see the live view of my website here. Just to reiterate it works fine on desktop, however on certain mobile devices the images simply disappear, or seem to be hiding behind the get in touch section. I thank you in advance for any help.

 .My-Gems {
     width: 100%;
 }


@media screen and (max-width:444px) {  
 .My-Gems {
     width: 100%;
     margin-top:-370px;
    }}

    @media screen and (max-width:333px) {  
 .My-Gems {
     width: 100%;
     margin-top:-380px;
    }}


  .Second-Header {
     display: block;
     margin-bottom: 5em;
     margin-top:4em;
     position: relative;
     color:#fff;
 }

 @media (max-width: 777px){
    .Second-Header {
     margin-bottom: 4em;
     margin-top:3em;
}
}


 @media (max-width: 666px){
    .Second-Header {
     margin-bottom: 3em;
     margin-top:2em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-bottom: 2em;
     margin-top:1em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-top:.5em;
}
}
  .Second-Header h2 {
     font-family:'Abril Fatface', cursive;
     font-size:2.5em;
     font-weight: 400;
     color:fff;
 }


@media (max-width: 777px){
    .Second-Header h2{
        font-size:2em;
}
}

@media (max-width: 666px){
    .Second-Header h2{
        font-size:1.8em;
}
}

@media (max-width: 555px){
    .Second-Header h2{
        font-size:1.5em;
}
}

@media (max-width: 444px){
    .Second-Header h2{
        font-size:1.3em;
}
}

@media (max-width: 333px){
    .Second-Header h2{
        font-size:1.2em;
}
}

@media (max-width: 222px){
    .Second-Header h2{
        font-size:1em;
}
}


 .item {
     text-align:center;
              -moz-transition: all 0.3s ease-out;

         -o-transition: all 0.3s ease-out;
         -webkit-transition: all 0.3s ease-out;
         transition: all 0.3s ease-out;
     float:left;
     position:relative;
 }
 .item {
     width: 50%;
     height: 100%;
 }
 .item-hover, .item-hover .mask, .item-img, .item-info {
     width: 100%;
     height: 100%;
 }
 .item-hover, .item-hover .mask {
     position:absolute;
     top:0;
     height:100%;
     left:0;
 }
 .item-type-double .item-hover {
     z-index:5;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     opacity:0;
     cursor:pointer;
     display:block;
     text-decoration:none;
     text-align:center;
 }
 .item-type-double .item-info {
     z-index:10;
     color:#ffffff;
     display:table;
     position:relative;
     z-index:5;
 }
 .item-type-double .item-info div.mycell {
     vertical-align:middle;
     height: 100%;
     display:table-cell;
 }
 .item-type-double .item-info .headline {
     font-size:2.4em;    
     font-family: 'Proxima Nova' sans-serif;
     text-transform: uppercase;
     width:90%;
     margin:0 auto;
 }
 @media (max-width: 888px) {
     .item-type-double .item-info .headline {
         font-size:1.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 666px) {
     .item-type-double .item-info .headline {
         font-size:1.4em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 444px) {
     .item-type-double .item-info .headline {
         font-size:1.3em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 390px) {
     .item-type-double .item-info .headline {
         font-size:0.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

  @media (max-width: 333px) {
     .item-type-double .item-info .headline {
         font-size:0.6em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

   @media (max-width: 222px) {
     .item-type-double .item-info .headline {
         font-size:0.5em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 .item-type-double .item-info .date {
     font-size:20px;
     font-family:'Canter';
     text-transform: uppercase;
 }
@media (max-width:444px){
    .item-type-double .item-info .date {
     font-size:16px;
     text-transform: uppercase;
 } 
}

@media (max-width:333px){
    .item-type-double .item-info .date {
     font-size:10px;
     text-transform: uppercase;
 } 
}



 .item-type-double .item-hover .mask {
     background-color:#000;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     /*filter: alpha(opacity=50);*/
     opacity:0.5;
     z-index:0;
 }
 .item-type-double .item-hover:hover .line {
     width:90%;
 }
 .item-type-double .item-hover:hover {
     opacity:1;
 }
 .item-img {
     width:100%;
     z-index:0;
 }
 .item-img img {
     width:100%;
     display:block
 }

<div class="My-Gems">
<div class="Second-Header"><h2></h2></div>
<div class="item item-type-double">
<div class="item-img">

<img src="http://kadeem.london/Image/Money-Matters-Logo.png" class="menukadeem" title="Money-Matters-Logo" alt="Money-Matters-Logo"/>
</div>
<a class="item-hover" href="designs.html">
<div class="item-info">
<div class="mycell">
<div class="line"></div>
<div class="headline">Designs</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://kadeem.london/Image/Metaphon-Fitness.jpg" alt="Metaphon-Fitness" title="Metaphon-Fitness" style="width:100%;"/>
</div>
<a class="item-hover" href="events.html">
<div class="item-info">
<div class="mycell">
<!--<div class="date">Events</div>-->
<div class="line"></div>
<div class="headline">Events</div>
<div class="line"></div>
</div></div>
<div class="mask"></div>
</a>
</div>
</div>

Answer 1

Most likely, it is the device. I have tested it on MobileTest

On none of the devices do the images disappear. If you have certain phones in which you believe cause the problem, as well as the browser you use in order to test the website, please comment them, otherwise it is most likely the phone itself.