0

I am using this function get_the_post_thumbnail_url() to pull the featured image of a post. I don't want to use the WordPress predefined image sizes which leads to using CSS. I specified the width of 40px but I noticed this pushes the text to the right. The image itself resizes perfectly but it appears the image width still remains the same which creates the space between the image and the text.

Here is the image:

enter image description here

Some CSS fix?

Thanks.

mary ongubo
  • 85
  • 8

3 Answers3

1

Add this piece of code along with it to fill the image fully :

<div class="container"></div>

.container {
  width: 40px;
  height: 40px;
  background-image: url("your image");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
Kaveesh Iyer
  • 11
  • 8
  • I have more than one image so it's not possible to specify inside CSS. The reason why I chose CSS is because I don't want to regenerate another set of thousands of images. – mary ongubo Sep 20 '20 at 13:27
  • Oh okay. You had mentioned an image so I thought you were talking about only one. – Kaveesh Iyer May 06 '23 at 17:51
1

Well we don't not have a code to work with. So just try to use on the container display: inline-block; or display: inline; lastly display: inline-flex;

choose one of these although they might all look the same, but they are not.

And the space will be removed since the container will wrap over the content inside of it.

Ahmad Dalao
  • 1,968
  • 1
  • 8
  • 14
0

you may add this style to the image tag and it must remove the extra space

margin-right: 5px !important;
mahmoud abd allah
  • 31
  • 4