We're merging with GenerateBlocks! Learn more here.

[Resolved] Wrap Text

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › Wrap Text

  • This topic has 7 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 8, 2020 at 9:41 am #22325
    dylsn
    Participant

    Is it possible to wrap the text around the image?

    In mobile view is when it’s noticeable.

    Here’s a link to an example: https://docs.google.com/document/d/1fqUvPyEFE3RcCmg5wIPbohk_DIsr1GBZlfUIxpWqtZ8/edit?usp=sharing

    Here’s a link to my test page (see bottom): https://www.hammerpedia.com/new-homepage

    Thanks.

    November 8, 2020 at 10:11 pm #22352
    elvin
    Moderator

    Hi,

    You can try adding this CSS code:

    .wp-show-posts-image.wpsp-image-left {
margin-right: 10px;
margin-bottom: 0px;
}

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

    Also, if the image is too big, consider resizing the image size display on Dashboard > WP Show Posts and open the target post list to edit.

    On the “Images” setting, set your Image width (px) and Image height (px) to something smaller so the text will have space to wrap around on.

    November 9, 2020 at 8:39 am #22378
    dylsn
    Participant

    Thanks for the css, however, it did not work. In mobile view the text stays below the image (even if it’s sized small). The page is here

    November 9, 2020 at 1:20 pm #22390
    elvin
    Moderator

    Try adding this for the mobile view:

    @media (max-width: 767px){
.wp-show-posts-image.wpsp-image-left {
    float: left;
    margin-left: 0;
    margin-bottom: 20px;
}
.wp-show-posts-image.wpsp-image-right {
    float: right;
    margin-right: 0;
    margin-bottom: 20px;
}
}
    November 9, 2020 at 7:49 pm #22435
    dylsn
    Participant

    TY! Looking so much better.

    anyway to get padding around the image when in mobile view? The text is very close to the image in mobile.

    November 10, 2020 at 3:17 pm #22465
    Tom
    Keymaster

    Hi there,

    Try adding this:

    @media (max-width: 767px) {
    .wp-show-posts-image.wpsp-image-left {
        margin-right: 1em;
    }
}
    November 10, 2020 at 4:43 pm #22484
    dylsn
    Participant

    Wow. thanks so much. Looks great.

    November 11, 2020 at 3:33 pm #22512
    Tom
    Keymaster

    No problem 🙂

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