So I’ve had some annoying issues with the padding under my headers. Now after using a Cascading Style Sheet (CSS) from codeacademy.com where I was learning to custom build this website.
So as you can see above there’s a huge gap under the section titles which makes it look out of place. I need to reduce that gap. To do that I need to see which code exactly is affecting that space.
I use Google Chrome to test my browsers so naturally I’d use the Firebug extension to troubleshoot (inspect) and check the code.
Simply right click the element of a website you want to look at the code and just click ‘inspect’. That will bring up the Google Console (firebug).
So straight away we can see the padding element under the section title is HUGE. On the right it opens up it’s relevance in the style sheet on the right and what particular CSS line is affecting that <div> (sectionTitle in this instance).
So above we can see that the padding has been set to a default of 14. I’ll need that to be at least a 4 for it to look right. That’s the padding size I normally use for section titles.
And that has now resolved the issue. It looks far, far better like this. More proffesional with no deadspace in between the section title and the body of text below.
This however has not changed the website in any way shape or form. How? Well this all happening in my browser alone all these changes. I can’t edit the website live like this.
The purpose of doing this is to indetify what I DO need to change and where exactly the problem line of code is.
I now need to edit the Stylesheet in Notepad++, save the changes and then upload the file entirely to the web host via the FTP (File Transfer Protocol) client.
So I used my FTP client (FileZilla) to upload the CSS master style sheet to the right directory on the web server.
I simply dragged and dropped which is one of the great features of FileZilla. It then began the process of automatically overwriting the file of the same name (I made that a default setting).
In the console code in the top part of FileZilla it tells me that it has been successful. With the only thing left to do to test the live version of the website to see if it worked.
It’s a longer process than say using WordPress. Where as if I make changes on WordPress through it’s admin panel interface, it’s immediate and done there and then. I don’t have to upload any files (usually). So this is a slower process which is one annoying aspect of building a website from scratch. Though do you feel like you have more of an intimate knowledge of your website this way and have to get more deeply involved with all it’s components.