[Resolved] Featured image alignment doesn't "take" in column view

[Callista]

Hi Tom,
On my blog page, I want to use a 2-column layout. When I use the customizer, I made the featured images 50px and selected “left” alignment for “Archives.” I also selected “Above text.” Theoretically, with these settings, the featured image should be a small image to the left of the title. However, when I look at the CSS, the float is set to “none.”

.generate-columns-activated.post-image-aligned-left .generate-columns-container article:not(.featured-column) .post-image {
float: none;
text-align: center;
margin-left: 0;
margin-right: 0;
}

If I change the float to left, it works fine. But it means I have to add additional CSS for what should just automatically work when I select left-alignment. It could be a bug.
Thanks!
Callista

GeneratePress 2.1.3

GP Premium 1.7

[Leo]

Hi there,

Which one is your blog page?

I clicked all the menu items and don’t think I saw them.

Let me know 🙂

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

[Callista]

Hi Leo!
Sorry about that. My “blog” page is called “Resources.” http://consulting.callistarakhmatov.com/resources/
If you look at the code, I’ve had to override the “float:none” CSS with a “float:left” in the Custom CSS box of the customizer. I also added some padding so the image wasn’t right next to the title.
Let me know if you have any more questions! (I managed to fix it but wanted to point it out because I don’t think it’s expected behavior.)
Have a great day!
Callista

[Leo]

That’s actually the correct behaviour.

The post title is supposed to be above the featured image, with the excerpt (which you don’t have) on the right side of featured image.

Your CSS looks good 🙂

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

[Callista]

Thanks, Leo.
I changed the post title to display above the featured image, and added some text so now I have an excerpt. I removed my custom css and now we are back to the same issue I flagged. Post title is above, and featured image is centered below it, and excerpt is below that. I want it to look like it does on my other site: http://www.callistarakhmatov.com/, with the image to the left, the post title next to it, and the excerpt below the title, also to the right of the image – the same setup with just 2 columns. By the way, I’ve tried both options to have the image below or above the post title, and it makes no difference to the alignment.

I took a look at the css and now the class

.generate-columns-activated.post-image-aligned-left .generate-columns-container article:not(.featured-column) .post-image

has “text-align: center;”. I think this could be the issue? It’s coming from style-min.css?ver=1.7.1:1.

I’m happy to add my custom css back in since it fixed the problem. But unless I’m missing something (which I admit is quite possible!!! I’m not a developer!!!), it doesn’t seem to work the way I anticipated.

Thanks for looking into this very minor issue for me.
Have a great day!
Callista

[Tom]

When columns are initiated, the plugin centers the featured image to prevent it from creating an ugly layout where the title/content is squished by the image. Of course, this isn’t the case when the image isn’t very wide to start with.

Not ideal – it would be better to respect the alignment options all the time. For now you can use CSS to fix it.

.generate-columns-activated.post-image-aligned-left .generate-columns-container article:not(.featured-column) .post-image {
    float: left;
    text-align: left;
    margin-right: 1.5em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Callista]

Hi Tom,
No problem, I’ll use CSS. Thanks for explaining! Have a wonderful day!
Best,
Callista

[Tom]

You too! Appreciate the feedback 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts