SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Align With Website

    Hi All,

    How do I fit my footer to adhere to the website width?

    http://lonsdale.clothingrepublic.com/

    Warmest Regards,
    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Normally you'd place it inside the main wrapper to avoid having to do this, but if you don't want to change the HTML, then just change this (style.css line 1219):

    Code:
    .footer-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    }
    to this

    Code:
    .footer-wrapper {
    margin: 0;
    padding: 0;
    width: 990px;
    margin: 0 auto;
    }
    By the way, your site's background image is way too large a file. Run it through the Photoshop Save for the Web tool to get the file size down to something reasonable (as a max of 100 or 200 KB).

    It would also look better if you did something like this:

    Code:
    body {
      background-image: url('http://lonsdale.clothingrepublic.com/wp-content/uploads/2013/05/Lonsdale_A6392.jpg');
      background-size: cover;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph as always!

    Have a great day ahead!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    An observation:

    The width of .body_wrapper is set by media queries.
    I would suggest that footer-wrapper either be given a width of 100% and put inside .body_wrapper (as Ralph first mentioned), or have its width set by media queries the same as .body_wrapper (which would seem to a desirable method).

    At the moment, the responsiveness of the footer is broken.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The template is expecting you to have a sidebar, but if you don't want that, then you can certainly change the width. firstly, remove this (responsive.css, line 92):

    Code:
    .container_24 .grid_16 {
    width: 630px;
    }
    and also remove this line in red (style.css, line 1683):

    Code:
    .content-bar.sample {
    margin: 0;
    padding: 0;
    margin-top: 33px;
    width: 105%;
    }
    That said, it's not a good idea to have text spanning such a large width—at least not at that font size. So I would suggest either enlarging the font or narrowing the content area, or both. Or rethinking the design.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •