Text not wrapping correctly

Hello @mshetzer
in the widget admin, there is a section dedicated to Custom Styles inside the Styles panel. Paste these lines there:

.widget ul li a.pis-thumbnail-link {
    display: inline;
}

Let me know, please.

That works perfect for the thumbnails.

My last task which I can’t figure out is how to force the text to the right (or below) of the Medium images.

When on a wide screen, the image fills the sidebar, and the text should move underneath. When on a mobile, and the sidebar gets moved below the normal content the sidebar size automatically increases, and I would like it to wrap to the side of the image, and then below.

Is this possible? I’ve made the changes in my testbed with a Medium image in the sidebar.

https://www.shetzers.com/shetzers_v01/

Thanks again for all your help and this great widget !
Matt

When you use the medium size of the image, use these settings:

Then save the widget and test the results.

Let me know, please.

@mshetzer,
your question deserves a more detailed answer, in addition to what I wrote above.

Let’s say that you have two ways to display your featured images:
1) thumbnail-sized and left floating;
2) medium-sized and centered.

If you want to use a thumbnail size, use these settings:

If you want to use a medium size, use these settings:

So, if you use the first way (thumbnail-sized and left floating), add these lines in your CSS stylesheet or in the Custom Styles panel of the widget:

/* WHEN USING THUMBNAIL-SIZED LEFT-FLOATING IMAGES */

.pis-li {
    overflow: hidden;
}
@media screen and (max-width: 400px) {
    .pis-li img {
        display: block;
        float: none;
        width: 100%;
    }
}

If you use the second way (medium-sized and centered), add these lines in your CSS stylesheet or in the Custom Styles panel of the widget:

/* WHEN USING MEDIUM-SIZED CENTERED IMAGES */
.pis-li {
    overflow: hidden;
}
@media screen and (max-width: 420px) {
    .pis-li img {
        display: block;
        float: none;
        width: 100%;
    }
}
@media screen and (max-width: 979px) {

    .pis-li img.aligncenter {
        display: inline;
        float: left;
    }
}

These lines take care of the various mobile devices screen sizes, whether you use a left-floating image or a centered image.

Let me know, please.

That did it perfectly. Thank you for the help !!!
Matt

Resolved

You’re very welcome!