Featured Image Alignment issues

[Alec]

Hello there,

I have this problem: when I make an Alignment of a featured image (via customizer-layout-blog-posts) on a single post on the to the Left (or Right) side but not the Center it mixes with the content i.e. the beginning of the content is filling the space on either side of an image but does not starts below it. I tried to play with the CSS :
to bring the text (the beginning of the content) down:
.single-post .entry-content{
padding-top: 300px;
}
but I believe it should not be a solution.
Cleared the cache, database, etc. Also searched all the related posts here…

Here is the example of the post with the featured image aligned left, size: auto:
https://staging1.aleckatzmusic.com/indexing-real-books-on-ipad/

I could of disable the featured image and make the base of the post (title, meta, feat-image..) with Elementor, but I want to keep as much of pure GPP as I can.

I guess there should be a simple solution, but could not get to it.

thanks in advance,

[David]

Hi there,

That is the expected behaviour of the Alignment left and right. It applies the CSS Float property which allows content to ‘flow’ around it if the space is available.

If you want the image to span the width of the content then you will need to either use a larger image or reduce the content width of the post.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

Thank you, David, for your quick reply. This is what I thought. Do you have an idea anyway, to separate the feat. image from the content without resizing the image or changing the width of a content keeping the image align left? maybe using padding or else?

I try to make it to look like in my old theme here using the same media files.
https://aleckatzmusic.com/i-remember-mulgrew/

https://aleckatzmusic.com/barry-harris-on-hocus-pocus/

I’ve created an element for single post, no sidebars with the content width of 760 or 800 px.

Thank you again,

Alec

[David]

You can add this CSS to text-align the image:

.single-post .featured-image {
    text-align: left;
}

You can also move the image above the title in Customizer > Layout > Blog –> Featured Image > Location

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alec]

Thank you for your help and time!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts