Mobile version hovering

Hi,

When accessing my website via mobile the posts title don´t show, as you need to hover over the images (which you cannot do on a phone). My website on my phone is just a bunch of images without a title.
How can I resolve this? Also important that the featured image don´t have a grey transparant layer over it.

I tried this:

@media ( max-width: 768px) {
.archive-post-header {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 30px;
background: rgba(0,0,0,0.75)
}
.archive-post-title {
font-size: 1em;
}
.has-post-thumbnail .archive-post-header, .has-post-thumbnail:hover .archive-post-header {
bottom: 0;
}
.has-post-thumbnail .post-overlay {
background: transparent;
opacity: 1;
}
}

But it isn´t working.

Also, I have one post with just the title and no featured image. The text doesn´t stay inside the post box (the last one when looking at it on the phone). How can I make sure it stays inside?
Thanks

The page I need help with: [log in to see the link]