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 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?
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>
</div>
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?
To be honest, I really don’t think using a pile of code written by someone else is a good way to learn responsive design. It brings on more troubles than it’s worth.
Your image seems fine to me (not blurry at all). I viewed the image on its own and on the page, and it was the same in both.
As for the footer, what do you mean by “too short”? Do you want it stuck to the bottom of the page (that is, a sticky footer)? That’s a little tricky to do cross browser, but if that’s what you want, we can help with that … although it will be harder because of that framework you are using. It’s much better to work with clean code, IMHO.
Hi Ralph, thanks for replying…
Hmmm… my previous non-responsive site had a much sharper main image - I think I may have just used the wrong image. Thanks for the heads up.
As for Skeleton, yes, I realized about 3/4th the way through the coding that I probably should have gone a different direction.
Sticky footer - in your opinion, would this be visually preferable? For some reason I seem to have some kind of mental block around how to design and code up footers! I’m just teaching myself web design, so that’s why it’s a bit of a mess.
Okay, uploading the previous version of the image fixed the blurriness problem.
As for footer - I designed this previously as a static site and just decided recently to transform it to responsive - so the footer isn’t really thought through for responsive, design-wise. If I made it a sticky footer, wouldn’t it just get in the way on small screens? I don’t think the info on it is that important, but I also think the sudden return to the dark background underneath it is unattractive. What would you suggest?
My preference is to make the body background color the color of the footer. (E.g. body {background: #e5e5e5;} )
That way, the footer color always stretches to the bottom of the page, no matter how tall the page.
Of course, this means that you have to set the background color on your menu and content divs etc. explicitly. But it’s what I always to to preven the ugly gap at the bottom of pages.
