Fixing the spacing in Header and Footer

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;
}

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.

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%;
    }
}

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.

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/

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!

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

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

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

Can you check on that?

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

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' );
} );

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

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

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.