Footer Align With Website

HTML & CSS
1

Hi All,

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

http://lonsdale.clothingrepublic.com/

Warmest Regards,
Chris

2

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):

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

to this

.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:

body {
  background-image: url('http://lonsdale.clothingrepublic.com/wp-content/uploads/2013/05/Lonsdale_A6392.jpg');
  background-size: cover;
}
3

Thanks Ralph as always!

Have a great day ahead!

4

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

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):

.container_24 .grid_16 {
width: 630px;
}

and also remove this line in red (style.css, line 1683):

.content-bar.sample {
margin: 0;
padding: 0;
margin-top: 33px;
[COLOR="#FF0000"]width: 105%;[/COLOR]
}

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.