Title Padding Issue

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue1

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue2

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

ghazni_h_dmp_assignment3_about_gap_padding_issue3

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

ghazni_h_dmp_assignment3_about_gap_padding_issue4

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue5

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue6

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue7

So I used my FTP client (FileZilla) to upload the CSS master style sheet to the right directory on the web server.

 

ghazni_h_dmp_assignment3_about_gap_padding_issue8

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

ghazni_h_dmp_assignment3_about_gap_padding_issue9

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.

ghazni_h_dmp_assignment3_about_gap_padding_issue10

Fixed 🙂

Conclusion

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s