[Resolved] Decrease the spacing between the headline and image.

Hi there,

Did you mean the spacing here?

If so, try adding this CSS:

.post-image-below-header.post-image-aligned-center .inside-article .featured-image, .post-image-below-header.post-image-aligned-left .inside-article .featured-image, .post-image-below-header.post-image-aligned-left .inside-article .post-image, .post-image-below-header.post-image-aligned-right .inside-article .featured-image, .post-image-below-header.post-image-aligned-right .inside-article .post-image {
    margin-top: 0em !important;
}

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

Hi there,

you would have to move the featured image below the first paragraph for both Desktop and Mobile. Theres no simple way to change its behaviour for the different device sizes.

You can use this PHP Snippet:

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( '<div class="incontent-featured-image">' . $feat_img . '</div>', 1, $content );
    }
    return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

It will output the featured image after the 1st Paragraph.
Then you can either disable the Featured Image in Customizer > Layout > Blog -> Featured Images –> Posts to remove the current one.

Or you can use some CSS to hide each image for each device type.

That code is PHP – this article explains how to add it:

https://docs.generatepress.com/article/adding-php/

CSS will only be required if you choose to have a different position for Desktop and Mobile. If thats a requirement then you can share a link to the site when the above code is added.

Can you link us to a post where can see this?

I just checked the link you’ve provided in the original topic and the featured image is still on top below the post title.

Hi there,

The text above the featured post seems to be added within the post’s content.

Try adding a italic-text class to the paragraph above the featured image and add this CSS:

.entry-content p.italic-text {
  font-style: italic;
font-family: [your font family here];
}

Replace [your font family here] with your preferred typography but make sure the one you add is properly imported to your site, else it won’t work.

You can add this CSS to your site it will target the first paragraph of your posts:

.single-post .entry-content p:first-of-type {
  font-size: 20px;
  font-style: italic;
  font-family: "font-name", serif;
}

For the font-family you will want to change the font-name to a font you are already using in your customizer for it to work.

How to add CSS:
https://docs.generatepress.com/article/adding-css/