Images only are disappearing on mobile devices but rest of content visible - css

Question

Images only in this particular row of my webpage are disappearing when displayed on the iPad mini (768x1024) and the Galaxy Tablet (800x1280). Other content in the section remain visible. Why would this be happening? Is there a quirk with the mobile devices or perhaps an error in my CSS? (On the rest of the page both images and text are displaying properly on mobile devices.)
The (barebones) code for the row is:
<div class="row" id="advertcontainer">
<h2 class="wow fadeInUp adjust" data-wow-delay="0.2s" style="max-width: 100%;display: block;">What's On across the Lakeside Group</h2>
<div class="grid_4 wow fadeIn" data-wow-delay="0.2s">
<div class="imagediv">
<a href=""><img src="image.jpg" alt="image test" />
<div class="transparent_ribbon"></div>
<div class="overlayeventname">Text here</div>
<div class="overlayeventplace">More text here</div>
</a>
</div>
</div>
</div><!-- /row /advertcontainer -->
In my CSS I've set a breakpoint of 768 to hide this entire row:
#media (min-width: 320px) and (max-width: 768px) {
#advertcontainer {
display: none;
}
}
My complete stylesheet can be viewed at http://www.lakesidesurrey.co.uk/css/style.css
This is what it should look like
But this is what is being displayed on the iPad mini and the Galaxy Tablet

Answer 1

You have this rule in your CSS:
.imagediv img {
position: absolute;
z-index: -1;
}
This will move those images behind all regular layers and change their position to the upper left corner of their containers (if they have position: relative). If those parent elements are not transparent, the images will remain invisible.
Plus, if the image size isn't set within the img tag, the size will be 0x0 since there is no defined widthand height --> they'll be invisible...