If you’re not familiar with SumoMe or the Discover plugin you can read more about it here.
The problem with SumoMe Discover
As much as I love the Discover plugin in by SumoMe. Out of the box, it looks F’ing awful! A throwback to web design from 1996. Why? Because the title’s are badly formatted and the spacing is poorly arranged.
Worst of all, none of the thumbnail sizes are consistent. Some are wide, some are tall, some are square and they’re all different sizes. It just looks messy and out of place on any well designed website.
Because there seems to be no built in option for correcting these things, so I’ve written up a little bit of code in CSS. You can simply cut and paste my code into your custom CSS. It will make it look a million times better instantly.
The following code is designed to work on a site approximated 1200 px – 1250 px wide, with SumoMe Discover set to display 6 columns.
You can simply adjust the width and height to a size that suits you. The code should be fairly self-explanatory, but for those that need it I’ve added some guidence comments.
Tidy Up SumoMe Discover’s Thumbnails
If you’re a techy/web designer you might not need this and could have probably worked it out for yourself. But as you’re here, I’m not going to assume that. I’m going to assume you’ve typed “Fix SumoMe Discover Thumbnails” or “Crop Discover Thumbnails In SumoMe” or something of that sort.
display: inline-block !important;
width: 160px !important; /*change to adjust thumbnail width*/
height: 140px !important; /*change to adjust thumbnail height*/
margin: 5px !important;
border: 2px solid #fff !important;
background-position: center center !important;
background-size: cover !important;
font-size: 13px !important; /*change to adjust title size*/
max-height: 40px !important; /*restricts very long titles to two lines, remove this line to always show full title.*/
font-size: 9px !important; /*change to adjust displayed url size*/
line-height: 10px !important;
If you’ve got any useful tips or ideas, leave them in the comments below.
If you’ve used my code on your site, let me know I’d love to check it out.