[Support request] Fixing the spacing in Header and Footer

[Darshil]

Hey there,
I have a few problems:

1) The logo image (being used as header image) has white space around it. Can you please help me fix that, such that the image is fully stretched.

2) In the footer area, the name of the pages is listed vertically, which is increasing the footerbar space. I would like the page names to be stacked horizontally, so that it comes in the same row (like the reference website)

3) The page number section is aligned left, how do I align it to the center?

[David]

Hi there,

1. Add this CSS:

@media(min-width: 769px) {
    .site-logo {
        max-width: unset;
    }
    .site-logo, .site-header img.header-image {
        width: 100%;
    }
}

2. Move your Menu Widget to the Footer Bar

3. Add this CSS:

.paging-navigation {
    text-align: center;
}

[Darshil]

Hi David!

Everything worked, thanks!

I want a black strip (like there’s in the primary menu bar) to cover the footer menu – just like the reference site link that I shared.

Please help me with that.

Also can you please share a CSS code to align the title of the posts vertically? It is already center aligned horizontally, and I’d like to get it aligned vertically too.

[David]

You can set the color in Customizer > Colors > Footer.

Add this CSS to align the title vertically:

@media(min-width: 769px) {
    .post-image-aligned-left .inside-article {
        display: flex;
        align-items: center;
    }

    .post-image {
        flex: 1 0 50%;
    }
}

[Darshil]

Thanks David,

Is there a way to resize featured images, such that if I upload them, they are resized in a specific dimension every time.

[David]

There isn’t a reliable method for doing that, worst case it would be cropping of the image as opposed to resizing them, which would probably create unintended results.

Always best to resize the images to suit before uploading.
Plenty of free desktop apps out there to do this.

Or if you want a real bargain Affinity Photo is awesome and on a BF sale:

https://affinity.serif.com/en-gb/photo/

[Darshil]

Thanks David!

There’s another bug, my featured image’s duplicate is shown at the top of the header (which is lying outside of the container.

Please help!

[David]

Do you have any custom functions or code in a Hook Element ?

[Darshil]

.page-numbers {
padding: 5px 6px;
background-color: #FF0000;
border-radius: 4px;
color: #fff !important;
border: 2px solid #FF0000;
}

.page-numbers:hover,
.page-numbers.current {
background-color: #fff;
color: #FF0000 !important;
}

.entry-header{
text-align: center;
}
.post-image {
text-align: center;
}
.entry-summary, .entry-summary + .entry-meta {
display: none;
}

@media(min-width: 769px) {
.site-logo {
max-width: unset;
}
.site-logo, .site-header img.header-image {
width: 100%;
}
}

.paging-navigation {
text-align: center;
}

@media(min-width: 769px) {
.post-image-aligned-left .inside-article {
display: flex;
align-items: center;
}

.post-image {
flex: 1 0 50%;
}
}

pre {
white-space: pre-wrap;
}

@media (max-width: 420px) {
.wp-block-table tr td {
min-width: 48px;
}

.wp-block-table tr td:first-child {
font-size: 12px;
}
}

I don’t know what you mean by hook, and where to find that. I have this code in additional CSS. Does this suffice, if not then please tell me where to look. Thanks!

[Leo]

This is what David is referring to:
https://docs.generatepress.com/article/hooks-element-overview/

Can you check on that?

[Darshil]

Hey Leo,

So I just activated the elements section and there was nothing it said “no posts found”. But I remember long back in the free forums I asked for help for integrating google analytics in the header and you gave me a code to add it to the functions.php file in the child theme.

I think that is what you’re looking for. Sharing the entire code from functions.php child

[David]

Hi there,

are you wanting to remove the featured image in the post content?

If so in Customizer > Layout > Blog –> Featured Images >>> Post – set the location to Below Title.

OR

IF you want to remove the Featured Image that is being displayed about the Page then remove this function from your functions.php:

add_action( 'wp', function() {
    remove_action( 'generate_after_entry_header', 'generate_post_image' );
    add_action( 'generate_before_content', 'generate_post_image' );
} );

[Sara Genone]

Hi David
I want to remove the Featured Image that is being displayed about the Page but I don’t want to modify the function.php file is it possible?
https://dev.socialmela.it/consulenza-formazione/
Thank you
Sara

[Sara Genone]

I find solution by myself 🙂
adding this css code
it’s work but is it correct?
.page-header-image-single, .featured-image {
display: none;
}
thks
sara

[David]

Hi Sara,

you do not need to edit the functions.php – you can remove Featured Images in Customizer > Layout > Blog –> Featured Images >>> Posts or Pages.

[Author]

Posts