Resizing Featured Image

Hi @xtendlife,

For the Twenty Twenty theme, here’s the CSS to resize the featured image on the single post:

.single-post .featured-media img {
    max-width: 90%;
}

Thank you very much!

That worked! I forgot to mention it was for the Twenty Twenty theme.

But you figured.

I sincerely appreciate all that you do here.

Best regards.

Hi Support,

One quick question regarding this solution.

It worked fine in the CSS customizer.

If I add it to the child theme CSS file it does not work.

I tried that !important thing, but that did not work either.

.single-post .featured-media img {
max-width: 90% !important;
}

I am fine if the code will only work in the customizer.

But I like to keep the custom CSS codes in the child theme CSS file.

Thanks.

Hi @xtendlife,

I’ve tried to put the CSS code in a child theme, and it works for me.

This is the code in the functions.php file of the child theme:

function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

This is the code in the style.css file of the child theme:

/*
Theme Name: Twenty Twenty Child Theme
Description: A child theme for Twenty Twenty.
Author: Your Name
Template: twentytwenty
Version: 1.0
*/

.single-post .featured-media img {
    max-width: 90%;
}

If you still have the issue, if possible, please share the URL of your website.

Have a nice day,
Diane

Hi Diane,

Many thanks for taking a look. You guys have been very helpful and supportive.

I am sharing the child theme I am using.

https://app.box.com/s/fi1cdx67huvsoopewlywdnox9lsk9fvb

I have a local setup. A live link is not available at the moment.

Take a look at the child theme and let me know if I have it right.

The other codes in the CSS are working.

If all is well with the child theme, it is likely something else that is causing the CSS to not render.

Regards.

@xtendlife,

I’ve tested your child theme, the CSS is working fine for me. The best way to debug your CSS code is to inspect the CSS code on the single post’s image to see which code overrides yours. (Google Chrome: right-click on the image and select Inspect https://developers.google.com/web/tools/chrome-devtools/css)

I hope the above is useful to you.
Diane

Hi Diane,

Many thanks for taking the time to look into this.

I will take a closer look on my end and see what is going on.

Kind regards.

Hi Diane,

This is a quick update.

I found the issue. It was the browser cache.

Thanks for confirming on your end all was good.

That conclusion forced me to figure what was really happening on my end.

Kind regards.

Donovan