help with responsive layout issues

Hi – if someone could help me solve this problem I would be much appreciative.

On the home page of my site I am trying to have the four boxes that are under the slider adjust to two rows and columns on an ipad instead of one large stretched box.

I know this is something that should be targeted at the @ media but I can’t figure out how to properly do it.

site is http://macrodiver.com

thanks for any help