Ben Sibley on "Featured image size"

Hi,

I'm trying to find a way in the editor to reduce the vertical size of the featured image. Can some one point me in the right direction?

Many thanks

Hi Edward,

Thanks for using Author!

The height of the featured image can be reduced with the following CSS:

.featured-image { padding-bottom: 35%;
}

You can copy and paste that code into the "Custom CSS" section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

The code is a bit unintuitive, but if you decrease/increase the 35% value, it will decrease/increase the height of the featured image. The new width to height ratio will remain the same at all screen sizes including phones and tablets.

Hi,
Can I add to this please?

Great theme - I really like the simplistic design and ease of reading.
I have featured images that are different sizes, and when I change the code above it changes the height, but then changes the scale. Is there a way to just have the featured images in their native size and scale?

Also, my main content section appears to be somewhat left aligned (less of a space on the left than the right), which doesn't seem to change much when scaling the browser window. not sure if this can be adjusted too?

Many thanks in advance!

Yea this this possible with the following CSS:

.featured-image { overflow: visible; padding: 0; height: auto; line-height: 0; text-align: center; > img, > a > img { position: static; height: auto; width: auto; object-fit: contain; } > a { position: static; } }

This is going to make all of the Featured Images use their natural size/dimensions. There is also a feature in Author Pro that lets you change the Featured Images to any of 11 different aspect ratios (including a natural dimension option).

The main content is further to the left on purpose as part of the design (based on the Van de Graaf Canon), but you can change this with the following CSS:

@media all and (min-width: 71.875em) { .main { padding: 3em 5.555% !important; }
}

Thats perfect, thanks so much for the quick reply - and again, great theme! :)

I've just added the code for featured images, but it has now made them disappear altogether. Changing the padding takes it back to the old sizes and ratios

Woops sorry about that!

Please use the following CSS for the Featured Images instead:

.featured-image { overflow: visible; padding: 0; height: auto; line-height: 0; text-align: center;
}
.featured-image > img,
.featured-image > a > img { position: static; height: auto; width: auto; object-fit: contain;
}
.featured-image > a { position: static;
}

Spot on! All sorted :D, thanks so much!!

Great! No problem :)