Hi Tim,
That can’t be helped as the thumbnail and the title/author/date/category bits are in the same container. Once the text is longer than the height of the thumbnail the browser will automatically have the text wrap around the image.
To prevent this from happening you’d need to restructure the list in a way that the text (title, author, date & category) is contained in a separate div, like this for example:
<ul>
<li>
<a href="https://www.example.com"><img src="some-thumbnail.jpg"></a>
<div class="some-class">
Text would go here
</div>
</li>
</ul>
Of course you’d need to style this in a way that behaves exactly what you have now, except that this time the content won’t wrap around the image anymore like this because it’s contained in a div element.
Ah, I see. Thank you for explaining that.
I’m aware I’m well out of my depth here and I know this will sound silly as I’m a complete noob to this, but where would I put that code to restructure it?
I’ve logged into my host provider (siteground) where I can access the File Manager – public html – wp-content-plugins – wordpress-popular-posts – assets – css – admin.css, but I’m fairly sure I’m in the wrong place as I see no code similar to the above with < .. > type code in them.
There is some code that looks similar to this in the backend of wordpress dashboard in Appearance – Theme Editor – Parent Theme – sidebar.php though. But not a lot, only 42 lines.
If you could even just signpost me to somewhere where I can learn how to do this (or some keywords for me to google), so you don’t have to hold my hand I’d appreciate it a lot!
Many thanks,
Tim
Can’t use my computer right now (power outage in the area, typing this from my phone), maybe this can help get you on the right track: How can I use my own custom HTML markup with WordPress Popular Posts?
If you have any questions don’t hesitate to ask, alright?
Big thanks Héctor!
I’ll have a look at this.
Hope the outage is squared away soon for you!
Tim
