CSS Footer Help

Associate
Joined
20 Sep 2003
Posts
2,361
Location
Scotland
Looking for some help with a basic web design I am working on. The footer is longer that the header and I can't figure out why. Is it due to the divs not being contained within the wrapper div?

Been a while since I designed a website, trying to get to grips with CSS and how it works again.

Appreciate any suggestions.

Cheers!
 
Associate
OP
Joined
20 Sep 2003
Posts
2,361
Location
Scotland
That does fix the footer width but it means my footer content is not padded and is hard up against the edge of the footer. Do I need to have a nested div within the footer to solve this?
 
Associate
OP
Joined
20 Sep 2003
Posts
2,361
Location
Scotland
Before you get too far down the design path on this site, I'd recommend doing some reading up on Responsive Design techniques. I realise that the site is at an early stage, but it already fails Google's Mobile Friendly Test. This means it'll get downranked for searches made from mobile devices.

With Responsive Design you build 'mobile first' so that the site displays nicely on mobile devices and scales up for desktop, with images and layout adapting depending on the device or screen resolution. There's lots and lots of guides out there on responsive design, have a Google.

You also don't have to build from scratch, there's a wide range of free responsive design frameworks available to get you started and which take some of the headache out of it. However, some of the more popular ones such as Bootstrap and Foundation can get a bit bloated unless you download a custom version with the bits you don't need stripped out. There's plenty of alternative lightweight frameworks too. There's a list here which whilst not exhaustive lists the main ones.

Yeah I realise its not responsive but I just wanted to try and learn the basics from the ground up. I've been told buy guys at work to think about using PureCSS. I am going to keep at this version so I have something to show and then build on it from there. I am coding the site in Sublime Text so I can get to grips with the code and understand whats actually going on.
 
Back
Top Bottom