Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[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 weeks ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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.

    #22352
    elvin
    Participant

    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.

    #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

    #22390
    elvin
    Participant

    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;
    }
    }
    #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.

    #22465
    Tom
    Keymaster

    Hi there,

    Try adding this:

    @media (max-width: 767px) {
        .wp-show-posts-image.wpsp-image-left {
            margin-right: 1em;
        }
    }
    #22484
    dylsn
    Participant

    Wow. thanks so much. Looks great.

    #22512
    Tom
    Keymaster

    No problem 🙂

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