Rectangular Featured Images on Post and Home page

I just discovered a partial solution. Changing the Media Screen padding bottom from 33.3333% to 20.0000% gave me the rectangular look on the home page I wanted. Unfortunately, on tablets and smart phones the images revert back to the square size.

@media screen and (min-width: 1024px) {
	/* Content */
	.archive .hentry,
	.blog .hentry,
	.search-results .hentry {
		padding-bottom: 20.00%;
		width: 33.3333%;
	}

Hi there! The reason the above CSS doesn’t apply to smaller screens is that the CSS is wrapped in a media query that applies it only to screens 1024px or wider.

You could try adding additional media queries to target smaller screen sizes. If you have a look in section 7 of Cubic’s stylesheet you’ll see the various screen sizes that Cubic targets to be responsive on different devices.

I see that suggested upload size for Featured Images is 2000 x 1500 but I’d like to change this, making it more rectangular, such as 2000 x 1000

Give something like this a try in your custom CSS:

body.single .hentry.has-post-thumbnail .wp-post-image {
     min-width: auto;
}
.single .entry-thumbnail {
     min-height: 1000px;
}

In any case, can you tell me which file(s) and code I would edit to make this change

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer. (Since Cubic is already a child theme, it wouldn’t be possible to create a child theme of it.)

Excellent, thank you Kathryn for the helpful response!

You’re very welcome!

In case anyone is interested this is the code I used that seemed to fix the problem of seeing square thumbnail images instead of rectangular thumbs on the home page when viewed on a phone:

@media screen and (max-width: 568px) {
	/* Content */
	.archive .hentry,
	.blog .hentry,
	.search-results .hentry {
		padding-bottom: 60.00%;
		width: 100%;
	}
}

Right now my last remaining issue is to try and shrink down the width of the featured images that appear at the top of a post when viewed on phones. I was able to do this on PC monitors by using this code but when I tried adapting it to smaller smart phone screens the images were still remaining large and being cropped on the left and right:

@media screen and (min-width: 1024px) {
body.page .entry-thumbnail, body.single .entry-thumbnail {
    max-width: 75%;
    margin: auto;
}
}

I’m thinking the solution is probably staring me in the face but I don’t see it at the moment.

As I mentioned in a few other threads, if you could provide a link to your site it would be super helpful! As you’ve now added a bunch of custom CSS, seeing everything in place will make it a lot easier to troubleshoot or add new customizations. I’m hoping it’s online and not just on a localhost. ??