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

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

Home Forums Support Featured image alignment doesn't "take" in column view

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #649191
    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
    #649422
    Leo
    Staff
    Customer Support

    Hi there,

    Which one is your blog page?

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

    Let me know πŸ™‚

    #649639
    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

    #649965
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #652286
    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

    #652344
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #652350
    Callista

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

    #652369
    Tom
    Lead Developer
    Lead Developer

    You too! Appreciate the feedback πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.