Sorry this is so long! I could really use some help, as I'm new to responsive grids and Skeleton.css.

I used Skeleton.css to lay out my site so I could learn responsive design, but I am having problems finding detailed Skeleton answers for my problems. I'm looking at my site on Chrome, Firefox and Safari on a Mac. I haven't looked at it yet on Explorer and on PC... I want to fix these things first before tackling more problems..

My site is here:
My css for layout is here:
There is also the Skeleton stylesheets at the same address but stylesheets/base.css and stylesheets/skeleton.css

1) My main image I put into a Skeleton "container" class and specified "scale-with-grid" class, too. But this seems to be making my image blurry. It is perhaps resizing it even before the grid is resized? How do I get around this?

2) My footer is too short on Firefox browsers in a large window. It's fine on Chrome and Safari. What am I doing wrong here? I know I didn't approach it correctly because I set the height by eyeballing it on browsers locally. However, when uploaded it behaved very differently in Firefox than it did locally.

My html for footer:
<div class="footer-wrapper">
<footer class="container"><p>The text...</p></footer>

The css:
.footer-wrapper {
position: relative;
margin-top: 0;
background-color: #e5e5e5;
border-top: 1px solid #fff;
bottom: -10px;
height: 40px;
width: 100%;}

.footer-wrapper footer { margin: 0 auto; }

I also changed the height of the wrapper in media queries under a certain size, also by eyeballing it in the browser. I know this isn't ideal - what should I be doing instead?

Thanks for any help!