Images to big for mobile device view

Site URL: http://www.goldhawke.uk

I have a grid of images on my home page which you can click on and they link through to each project. The problem is on some browsers the images are too big and only can be seen if the web browser is fully opened up.  Also on mobile devices the images are too big and bleed off the edge of the screen.

There is crop image check box in the desiogn settings but when its unchecked the images are then too small. I have attached 2 images. One which shows the images too big and bleeding off the page, and the second image shows the unchecked 'crop images' version. 

Any help would be much appreciated.

Site details below

Many thanks

Try adding to Design > Custom CSS

div.index-section figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}