CSS Footer Help

[DezUk]

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!

 

[gummi32]

Looks like the padding style for the footer might be causing this.

Tinkered with it and removing padding-left: 50px; lines up the background.

Maybe you want to apply the padding style to the text element only

 

[DezUk]

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?

 

[gummi32]

Yes you can add a nested div and then style just that div to have the padding-left

 

[DezUk]

Thanks, much appreciated

 

[Cern]

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.

 

[DezUk]

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.

 

[Cern]

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.

Yes, it's definitely good to learn the basics as it'll make things a lot easier when it comes to working with a responsive framework as you'll have a better understanding of what the framework is doing and how to control and customise it to your needs.

A framework might seem like 'cheating' a bit, but it can save a lot of time because you aren't having to reinvent the wheel. Also, the mobile friendly and grid layout features in a framework are tried, tested and optimised, saving you many many hours of trying to get this right if building 100% from scratch.

The main downsides of a framework are code bloat (some are worse than others) and the fact that if you're not careful your site can end up looking like a clone. Both of these problems can be overcome though.

Once you really understand what you're doing with a framework you can strip out some of the code bloat to streamline things further, either by downloading a customised version of the framework or stripping elements out manually. But that's stuff to think about later.

And once you know what you're doing it's relatively easy to customise a framework so your site doesn't look too similar to others using the same framework. Some frameworks are easier to customise than others.

PureCSS is a good framework to choose, it's lightweight and fairly easy to customise.

 

[DezUk]

Thanks for the advice man..... got any good resources to get me started as grid layouts confuse me right now.