Home Support Blog Way How to ensure the text doesn't continue wrapping below the featured image

This topic contains 7 replies, has 4 voices, and was last updated by  dbookbinder 9 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #506

    pinkalligatorr29
    Participant

    Hi,
    Was wondering why sometimes the text would wrap past the featured image, and other times it does not. see link to attached pic.
    https://pasteboard.co/GzoYOCl.png

    See how in the second image/text set it wraps below the featured image, where as in the first one it’s cut back? I realize that it’s based on the number of characters but is there any CSS code that can be used to override so it doesn’t wrap under the featured image?

    Thanks!!

    #507

    Promenade Themes
    Keymaster

    Hi @pinkalligatorr29,

    It can be controlled by number of excerpt length. You can reduce excerpt length to lower number.

    Or, you can also use following CSS to prevent text floating left without changing excerpt length.

    .entry-img {
        width: 50%;
        display: inline-block;
        padding-right: 10px;
    }
    
    .detail-wrap {
        display: inline-block;
        width: 50%;
    }
    #538

    pinkalligatorr29
    Participant

    Thanks. However, when I add that, it changes the post once you open it– and doesn’t format correctly.
    Images: Post as per home page (that shows all new posts in summary)
    https://pasteboard.co/GA5hiK8.png

    And here’s the post once you double click continue reading — it takes you to the full post, but the format is the same as the home page’s format.
    https://pasteboard.co/GA5hz7V.png

    I’ve circled in blue the huge space that it creates in the formatting…. anyway you can add CSS to make the CSS only effect the home page?

    thanks!

    #539

    Promenade Themes
    Keymaster

    Hi @pinkalligatorr29,

    You can add following css to effect home page only:

    .home .entry-img {
        width: 50%;
        display: inline-block;
        padding-right: 10px;
    }
    
    .home .detail-wrap {
        display: inline-block;
        width: 50%;
    }
    #992

    lex7934
    Participant

    I used the css above that only affect the home page, but is there a way to do the same on the category posts page?

    #993

    Promenade Themes
    Keymaster

    You can replace those CSS with:

    
    .home .entry-img,
    .archive .entry-img {
        width: 50%;
        display: inline-block;
        padding-right: 10px;
    }
    
    .home .detail-wrap,
    .archive .entry-img {
        display: inline-block;
        width: 50%;
    }
    #1143

    dbookbinder
    Participant

    I tried this, and while it works correctly for the home page and blog posts, text still wraps under images when I view a list of posts by category. I modified the CSS like this and it seems to work correctly. However, now entries with no featured image only take up the left half of their space and the right side is blank. It would be better if these entries took up the whole available space, or at least if they took up the right half, to be consistent with the positioning of the other entries’ text.

    .home .entry-img,
    .archive .entry-img {
    width: 50%;
    display: inline-block;
    padding-right: 10px;
    }

    .home .detail-wrap,
    .archive .detail-wrap {
    display: inline-block;
    width: 50%;
    }

    • This reply was modified 9 months, 3 weeks ago by  dbookbinder.
    #1145

    dbookbinder
    Participant

    I also see, now that I’ve implemented this change, that it messes up the display of text on smartphones. So, not really a good solution to the original problem.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.