Footer width advice!

[ramageftw]

Hi guys

I’ve created a site ( http://www.nvtgroup.co.uk ) and all is well until I viewed it on other devices. I’m having some issues with the footer width and background when resizing. If you could take a look at my site and if anyone has any advice to offer it would be much appreciated!

Thanks

[Paulie_D]

What exactly is the problem?

The footer is as wide as you have told it to be (960px as defined by #footerContent).

[Paulie_D]

I do think the ‘support’ divs are placed in an odd way.

Is there a reason they aren’t all wrapped in a single element inside the footer?

[ramageftw]

Here is an example of what I mean here. I’m sure its fairly trivial but I just can’t seem to sort it out

[URL=http://smg.photobucket.com/user/thunderpigeon/media/nvtscreenshot_zps0f0301b1.jpg.html][IMG]http://img.photobucket.com/albums/v144/thunderpigeon/nvtscreenshot_zps0f0301b1.jpg[/IMG][/URL]

When resizing, the right had side appears to shrink inwards blocking off a side of the footer.

With regards to the support divs, I feel it’s just my CSS/HTML inexperience showing there

[Paulie_D]

Yeah, that will be to do with the way you have positioned some of the elements on the page…most particularly the HTML structure of the header.

In general, we should put our HTML elements into the source code in the order they will appear on the page (left to right and top to bottom). In your case the header elements are all over the place and you have moved them around using positioning and margin values.

I would strongly suggest that you look at re-jigging the whole thing.

However, if you want a simple fix….I think I have narrowed it down to the ‘social’ div in the header.

The social div is, effectively, breaking out of the header and causing a scroll bar at the bottom of the page.

A quick fix is to add this…

#headerContent { 
overflow: hidden; <--- add this around line 34 of your CSS file
 }

[ramageftw]

Thanks for your help. The overflow hidden worked until the resizing went below 960px and then it started cutting it off again. Possibly another header element causing the damage?

I realise that I could do with tidying up my code. The search bar has been a bit of a pain too so that may also be causing some issues.

I’ll play about with the header elements a little bit more!

Much appreciated

[Paulie_D]

Your site is not set up to work below 960px so the question is, for all intents and purposes, irrelevant.

You would need to seriously rework the HTML structure AND the CSS to make the site truly responsive.

[Author]

Posts