Reduce spacing between thumbnail and text

Hello Lena,

the CSS selector to catch the element with the gap between image and text is
.recent-posts-widget-with-thumbnails ul li img.

To control the gap the left margin of the image is to define. So the CSS code for a .5em left margin is:

.recent-posts-widget-with-thumbnails ul li img {
    margin-left: .5em;
}

You can change the value of .5em to whatever you need, say 16px, 2%, 1em etc.

Hi Martin,

This is a nice simple widget and i’ll certainly give it 5 stars, but I have one question, similar to Lena’s.
I want the thunbnails to appear more to the left, so it alligns with my Upcoming events widget. How do I do that?

I’m using Headway themes and a Child theme nad I’d like to change the setting in the Child theme so it doesn’t get lost when I update.

Thank’s in advance.

Hi lange darm (sprichst du deutsch? was für ein Name ?? ),

Are you firm in CSS? Take a web developer browser extension like Firebug for Firefox and find out which element(s) create(s) the space on the left. Set the properties to the desired values in the style.css of your child theme.

I’m giving up of your plugin cause I see webmaster has to be a css professional to set spacing.
Voe Gol for instance: Just couldn’t set space between image and txt.
Maybe a step by step should be good, like which php file must be edited and so on.

Hi Ricardo, the CSS of your theme overrides the CSS of the plugin because of the rule of specificity.

I will think about a solution.

Ricardo, you can correct this that way:

1. On the server go to the plugin’s folder and open the existing public.css.
2. Set #sidebar with a following space at the starts of the first three lines (which start with .recent-....
3. To change the space between image and text go in the third line to the word margin, followed by four values. Change the third value, e.g. from .75em to 1em for more space or to .5em for less space.
4. Save the file.

Your change is available until you save the widget on the widget page again. The saving overrides that file.

Martin,
Thanks for your help.
As I see, just public.css file from plugin directory has to be changed, right?
If so, this is my final file:

.recent-posts-widget-with-thumbnails ul li { overflow: hidden; margin: 0 0 1.5em; }
.recent-posts-widget-with-thumbnails ul li img { display: inline; float: left; margin: .3em .75em 1em 0; }
 #recent-posts-widget-with-thumbnails-2 img { width: 55px; height: 55px; }
#recent-posts-widget-with-thumbnails-3 img { width: 55px; height: 55px; }

I think I did not get “Set #sidebar with a following space at the starts of the first three lines (which start with .rece” – means a space right on the 3rd line beggining?
And as you can see, third line has no margin. Would be sec line?
Would you mind to post here a full public.css for my case?

Thanks again.

Right file, Ricardo! The new code is:

#sidebar .recent-posts-widget-with-thumbnails ul li { overflow: hidden; margin: 0 0 1.5em; }
#sidebar .recent-posts-widget-with-thumbnails ul li img { display: inline; float: left; margin: .3em .75em 1em 0; }
#recent-posts-widget-with-thumbnails-2 img { width: 55px; height: 55px; }
#recent-posts-widget-with-thumbnails-3 img { width: 55px; height: 55px; }

And in your code it is margin in the second line, as you have assumed correctly!

Copy and paste the above code into the public.css and save the file. After reloading a page of your website you can see the change in design.

Thanks Again Martin,
But still no space between image and text – https://www.abrata.com.br/
Tryed 1em – even 2em
Any other tip?
Maybe you want to check my theme to download: facebook(dot)com/download/1525592314376309/sweet-tech.2.1.5.zip

My fault, sorry! You have to change the second value, not the third.

Super!
Danke shon!

if I want to overwrite css in my style.css
is it possible ?
thank you

Yes, you can overwrite the plugin’s CSS code with your own code. Please use the CSS rules of specificity if the plugin’s CSS comes after your own CSS. Overriding will work with higher specificity. Using “important” also works.

got it
thank you for this easy simple super plugin Martin