Thumbnail size/cropping and spacing

Hi @danniee001,

Using the widget and the thumbnails in the list of posts are displayed as small squares 75x75px. All my post thumbnails are in a widescreen format of 643x371px so the images are cropped in a bad way in the thumbnails. Is there any way to change the size of thumbnails and make them resize like 16:9?

Another user made a similar question so I’m going to ask you to have a look here.

Also, on my list all entries lie directly on top of each other with no spacing at all. Is there any way to add a few px of space between every entry of the list?

Yes, there is. And if you share your site’s URL I can tell you how ??

Hi and thanks for replying!

I edited the css to add some space like this:

/* Thumbnail styles */
.wpp-thumbnail {
display: inline;
float: left;
margin: 5px 5px 0 0;
border: none;
}

Is that the best way to do it? In regard to the thumbnail size I totally missed that it could be edited in the widget itself, sorry.

If you ask me, I would add the margin to the parent container: the li element.

.wpp-list li {
    margin: 0 0 5px 0;
}

.wpp-thumbnail {
    display: inline;
    float: left;
    margin: 0 5px 0 0;
    border: none;
}

Also, if you’re adding these changes to the wpp.css stylesheet that comes bundled with the plugin you’ll want to move into your theme’s folder. That way, future upgrades of the plugin won’t overwrite these modifications.

In regard to the thumbnail size I totally missed that it could be edited in the widget itself, sorry.

Don’t worry about it, happens more often than you think ??

Thank you!

I only played with child themes a little bit. Do I add this is /theme-child/style.css?

Yes, that works as well ??

Unfortunately its not working for me :/

/themes/mh-magazine-child/style.css and add the code there but nothing happens

Thank you

Did you refresh your browser’s cache? (ctrl+F5 if on Windows, cmd+F5 if on MacOs). If you did and nothing changed, then try adding the !important declaration to your custom CSS rules and check again.

Yes, I tried deleting cache and !important but nothing happens. If I make a change in the wpp.css the changes work ??

How odd.

Alright, try this:

1. Move the wpp.css file into the root of your child theme’s folder (eg. /themes/mh-magazine-child/wpp.css.
2. Go to Settings > WordPress Popular Posts > Tools.
3. Under Miscellaneous, set Use plugin’s stylesheet to disabled, then click on Apply to save changes.

… and check again ??

That kind of breaks the css so seems my child folder is not working as it should? I have added code however to the functions.php in the child that works hmm..

Fudge! Im so sorry. I forgot I had played around with new themes and accidentaly activated the standard time and not the child version.

So sorry brother for wasting your time :,(

Hahahah it’s OK. We all have days like that ??

Haha Im glad you understand. Thank you so much for all the great work you do for us and have a superb weekend <3