Blog page header, padding

Hi there,

What version of Page Header/GP Premium are you using?

You can check in the "Plugins" area.

Hi Tom,

it's Version 1.3.3.

cheers

The latest version of Page Header is 1.3.34.

Can you try updating to that version and see if it fixes it?

Following up on this:

How to add padding left/right of the header image?

Also (a more general css-noob question): How do i find out the name of containers of web content? So that i could use Simple CSS to modify whatever i see. Don't know if it works like this but...

Cheers,
- Jaakko Pöntinen

Hi there,

Just a regular page header image or page header content as well?

Use the "Inspect Element" tool in your browser (Chrome - right click "Inspect", Firefox use Firebug extension).

These tools will show you the container classes which you can use when writing your CSS.

Hey,

Thanks for the inspector tip - this is awesome! Now I have the POWER! BWHAHAHA none can hide!

And about the header: I need content padding (I think). I have padded the content container on my Generatepress-theme blog and I used the "Blog Page Header" Plugin to have the header to act as a link for the front page. Now I have to match the header's padding to that of the blog's content container (set in the customizer).

EDIT: I may have the power but I'm still stuck.
This is what firebug tells me (edited some info out):

Which tells me what? What should i pad with Simple CSS? So many identifiers and classes and variables and thingamajiggies and doodaas.

Cheers and thanks for the help, bear with me!
- Jaakko Pöntinen

Umm, i messed up in my last post. And I can't seem to edit it anymore.

I was saying, Firebug shows me this:

<div class="page-header-image grid-container grid-parent generate-page-header">
<a href="http://xxxx:#####/">
<img class="attachment-full size-full" width="1100" height="180" sizes="(max-width: 1100px) 100vw, 1100px" srcset="http://xxxx:#####/wp-content/uploads/2016/01/testheader11-300x49.jpg 300w, http://xxxx:#####/wp-content/uploads/2016/01/testheader11-768x126.jpg 768w, http://xxxx:#####/wp-content/uploads/2016/01/testheader11-1024x168.jpg 1024w, http://xxxx:#####/wp-content/uploads/2016/01/testheader11.jpg 1100w" itemprop="image" alt="abcbacbabcbac" src="http://xxxx:#####/wp-content/uploads/2016/01/testheader11.jpg">

How do i know what to write with Simple CSS to add padding, there's so much stuff there and nothing seems apparent to me. I thought there'd be like a div identifier...?

Thanks,
- Jaakko Pöntinen

You should do this:

.page-header-image {
    padding: 20px;
}

Hi Tom,

I am a newby so I tried to find the answer in the knowledgebase but was not successful.

The Headings (H1, H2 ...) seem to have a default minimum padding/margin so white space is created at the bottom which cannot be adjusted in the typography. You can make it larger but not smaller.
I would very much like to have the headings just above my paragraphs with the same line height as the lines in the paragraphs. Is there an option to remove this minimum default setting of this white space?

Thanks,

Michael

Hi Michael,

You can adjust the margin of the headings site-wide with this CSS:

h1, h2, h3 {
    margin-bottom: 15px;
}

Or individually by adding the style to them:

<h1 style="margin-bottom:15px;">My heading</h1>

Hi Tom. thx.
It worked.
In the meantime I got quite a bit of experience with CSS alterations!

Awesome! Glad I could help :)