SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Dublin, Ireland
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Skeleton.css - image sizing and footer problems

    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: http://www.beatcleaver.com/underbed/index.html
    My css for layout is here: http://www.beatcleaver.com/underbed/...ets/layout.css
    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>
    </div>

    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi smika. Welcome to the forums.

    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.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Dublin, Ireland
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Dublin, Ireland
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Thanks again for the help!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by smika View Post
    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.

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Dublin, Ireland
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •