Eliminate Text Wrapping around images

Hi @databell96,

CSS alone isn’t enough to prevent that text wrapping from happening so we’re going to make a couple of modifications to your popular posts list.

First, add the following CSS rules to your site (either via Appearance > Customize > Additional CSS or by pasting them into your theme’s style.css stylesheet):

.wpp-list-with-thumbnails {
	float: none;
}

.wpp-list-with-thumbnails li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.wpp-list-with-thumbnails li .wpp-thumb-container {
	display: block;
	width: 60px;
}

.wpp-list-with-thumbnails li .wpp-content-container {
	width: calc(100% - 60px - 0.5em);
}

Next, go to Appearance > Widgets, find your Popular Posts block and then under HTML Markup settings tick the Use Custom HTML Markup checkbox.

Finally, make the following changes:

#1 Set Before Popular Posts to:

<ul class="wpp-list wpp-list-with-thumbnails">

#2 Set Post HTML Markup to:

<li><div class="wpp-thumb-container">{thumb}</div> <div class="wpp-content-container">{title} <span class="wpp-meta post-stats">{stats}</span></div></li>

If you followed these instructions correctly you should have something like this:

Once you’re done, save changes.

Marking this topic as resolved due to inactivity.

OP if you still need assistance with this please feel free to leave a comment below.

Thanks. At first the images were all out of whack and then I realized I hadn’t included the last style. Oops! Fixed all that.