Problems Making The Home Page Responsive.

Well, this has been fun. I am currently really struggling with making my home page responsive. The only versions that it displays as it should is the full size, 960px + version and the smallest mobile version.

Mobile 

960px + (desktop)

When I try to view the page at any point above 480px and below 960px, this is how it appears:

Not cool.

At the moment I am in the layout.css trying to figure out why these issues are happening. For some reason, telling the browser to hide e.g. the brown navigation ribbons between 480 and 960 makes them disappear above 960 too, even though I have specified that they be shown when the screen is about 960. 

What is making the task more complicated and stressful is that I want to switch out the images being displayed when the screen gets smaller. This means that when the screen is at 960 and above they are hidden and then anything below they should be shown (and the originals to be hidden). This has worked well on other pages but for some reason this just is not working on this page.

The only reasons I can think of why this isn't working is 1. I have a lot of margin-top margin-bottom settings which changes the position of an image on the page. This could be why (like above) the images are merging in together when the page gets smaller and the Skeleton Framework starts to stack and rearrange. The other issue could be that there's a major confusion in the layout.css for the media queries which tell the browser what to display and how to display it at each resolution. 

I will update when I (or if...) I have a solution.