How to ensure the text doesn't continue wrapping below the featured image

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 4, 2017 at 4:53 pm #6736
    Anonymous
    Inactive

    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!!

    July 4, 2017 at 7:12 pm #6737
    ProDesigns
    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%;
}
    July 9, 2017 at 4:30 am #6738
    Anonymous
    Inactive

    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!

    July 9, 2017 at 5:11 am #6739
    ProDesigns
    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%;
}
    September 4, 2017 at 4:36 pm #6740
    Anonymous
    Inactive

    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?

    September 5, 2017 at 3:43 pm #6741
    ProDesigns
    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%;
}
    October 2, 2017 at 2:47 pm #6742
    Anonymous
    Inactive

    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%;
    }

    October 3, 2017 at 12:46 am #6743
    Anonymous
    Inactive

    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.

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