Change dimension of featured thumbnail

That is controlled by the theme only.

Thank you, will post in the theme support in that case.

How familiar are you with CSS? If you can figure that out, you can change how featured images are displayed. Here’s how:

Open the page with the featured images, right click on them and select “Inspect Element” (this is how this feature is displayed in Firefox and Chrome based browsers at least)

You will see a panel open up with the HTML elements on your page and the CSS codes that are affecting the currently selected element. Starting with the HTML panel, look for the html element that represents your featured image. If you did your right click directly on the featured image, you should be very close to it. The image itself will appear something like
<img src="www.yourimage.com/filepath">

There may be some other stuff in there too, but this will mean you’re on the one that affects images. Now look in the CSS area for the code that will tell the browser how big the image should be. You can see some examples of what this should look like at https://www.w3schools.com/Css/css_dimension.asp

If you don’t see any code like that, try going back to the HTML section and look for the parent element, which would be first slightly outdented from the img element above it (note, there may be some other “sibling” elements too, they’ll be indented the same amount as the img element). Once you find the code that’s setting the height and width, find the place in your theme for adding custom CSS, and paste in the “selector, which will be right above where the height and width code is located and will have something that starts with a “.” or “#” and may have a list of other things too. Copy that whole thing and past it into your theme’s custom CSS editor (be careful you’re not overwriting the theme’s core CSS files or you may have to reinstall the theme to restore it to default code).

Once you’ve got the “selector” copied and pasted, add in a space and a curly bracket “{” then add:

width: xxpx;
height: auto;

then close the curley bracket.

You may also want to add in a comment to remind you why you put that there. Your code should look something like this:

/*change the size of my thumbnails*/
.class .class2 img {
width: 250px;
height: auto;}

The first line is a comment to remind you what the next thing is supposed to do, so you can find it again later and remember what it’s for. anything inside the /*comment*/ will not be run by the browser, it’s just there for your knowledge. You can sub the 250 px with the width you want. By using “auto” for height, it will automatically scale the height to maintain the height-width ratio for your images, saving them from getting stretched vertically or horizontally.

Once you’re done, check your page and see if the size and appearance is right for you. If not, adjust the width until it looks right. You may need to clear your browser cache to see your changes each time, follow the instructions for your browser to do this if you’re not seeing any changes. If you’ve done it right, you should at least be seeing your new code showing up in the CSS inspector panel. If it’s there but crossed out, that means something else is overriding it, if so, post your code here using the code tags and I’d be happy to see if we can troubleshoot what’s happening.

@lizziejoycee I hope you disregard that bad advice given to change the image using CSS. It is almost certainly guaranteed to cause blurry images due to browser upsizing (if you go bigger), and responsiveness problems for every device by using a fixed width.
Ask the theme author for a change for PHP.

There are different ways to do things.
Some are better, some are faster. Some are cheaper, some are more expensive.
Based on the resources and our own needs, we assess trade-offs and decide on the best option for a specific case.

Ideally, the developer would be responsive and fix a bug in their theme.
That would mean it is fixed for everyone, which is more optimal.
Sometimes, when using free themes, the author doesn’t offer support and that is fine.
Sometimes paid theme authors do not respond the way we would like them to either.

Making use of Additional CSS can be a legitimate choice, if you need something cheap and fast.

Using a fixed width (or height) in pixels is NOT optimal.
However, that having been said, it does not present a security risk [and it is 100% reversible].
Everyone here is a volunteer. Sometimes advice doesn’t work – and that is okay.
People can have different opinions – and people can be wrong.

If you can’t get hold of the developer, or if it takes too long, or if your paid support expired, or whatever other scenario may make it desirable, it is possible to set the width as a percentage (of the parent container). That can be used in conjunction with the max-width property in CSS.
It may also be prudent to crop your images to the same aspect ratio before uploading them.

Either way, learning what doesn’t work isn’t a bad thing.
Neither is offering an alternative opinion.

• This reply was modified 4 years, 1 month ago by Carike.

I will point out that you can also use the code:

max-width: xxxpx;

for the line were:
width: xxxpx;
would go, max-width will cap how big an image is allowed to get, which will counter problems with pixilation if your image is too small, which is a valid point.

You can also set width as a % of the parent container as in:
width: 75%;
Which will make the image take up 3/4 of the area it has available to it, which will scale with the size of the screen. You can also do this (example, use the numbers that work for your website):

max-width: 250px;
width: 75%;

That will ensure the image uses up 3/4 of it’s container, and will cap it at 250 pixels wide, no matter what. That small change to the CSS mentioned in my last post above will solve the issues raised by @joyously

Also, keep in mind the people posting answers here are all volunteers, we’re not paid to post solutions in here, even those of us who build websites for a living, don’t get paid in here. The people asking questions often need to implement a solution in house, as they may not have the budget to hire a professional to do it for them, or buy a potentially expensive plugin or theme. Be sure and stay civil with those who volunteer their time to help others in here. You never know when you’ll be the one asking for help and people are more willing to do more to help people who are friendly.

Thank you everyone, appreciate all your comments and help! Will look into this now.