Title: Latest posts (WordPress block) featured image width
Last modified: September 30, 2020

---

# Latest posts (WordPress block) featured image width

 *  Resolved [leobeaufils](https://wordpress.org/support/users/leobeaufils/)
 * (@leobeaufils)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/latest-posts-wordpress-block-featured-image-width/)
 * Hi,
 * When I activate the Twentig plugin, my latest posts (WordPress block) featured
   image width is reduced.
 * How can I keep it as now (when the plugin is disabled) : [https://elus.rennes-ecologie.bzh](https://elus.rennes-ecologie.bzh)
 * I am talking about the two columns latest posts blocks (no three columns).
 * Cheers
    -  This topic was modified 5 years, 8 months ago by [leobeaufils](https://wordpress.org/support/users/leobeaufils/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Flatest-posts-wordpress-block-featured-image-width%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Twentig](https://wordpress.org/support/users/twentig/)
 * (@twentig)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/latest-posts-wordpress-block-featured-image-width/#post-13484762)
 * Hi Léo,
 * Twentig changes the size for the left-aligned image inside the Latest Posts block
   because by default, the layout isn’t responsive. If you look at your website 
   for screen width between 665px and 882px, the post titles aren’t readable, and
   the images take too much space. The Twenty Twenty theme sets the size to 290px
   while Twentig changes it to 25%.
 * If you want to use the Twentig plugin but increase the image size, you can add
   some custom CSS inside your child theme (or inside the Additional CSS panel in
   the Customizer) and replace the values below with your own values:
 *     ```
       .wp-block-latest-posts__featured-image.alignleft {
       	max-width: 35%;
       }
   
       .wp-block-latest-posts__featured-image.alignleft ~ * {
       	width: calc(65% - 2rem);
       	float: right;
       }
       ```
   
 * I hope the above is useful to you.
    Have a nice day.
 *  Thread Starter [leobeaufils](https://wordpress.org/support/users/leobeaufils/)
 * (@leobeaufils)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/latest-posts-wordpress-block-featured-image-width/#post-13490549)
 * Hi,
 * Thank you very much for this answer.
 * However, I added the custom CSS and it doesn’t make any changes. I had to add
   the !important rule to override the Twentig CSS and use jQuery to override the
   size html attribute.
 * Is there a better way to fix this?
 * Cheers!
 *  Plugin Author [Twentig](https://wordpress.org/support/users/twentig/)
 * (@twentig)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/latest-posts-wordpress-block-featured-image-width/#post-13500756)
 * Hi [@leobeaufils](https://wordpress.org/support/users/leobeaufils/),
 * The CSS code that we gave you works when entered inside the Customizer. If you
   add it inside a child theme, you must use the following code (to avoid using !
   important):
 *     ```
       .wp-block-latest-posts .wp-block-latest-posts__featured-image.alignleft {
       	max-width: 35%;
       }
   
       .wp-block-latest-posts .wp-block-latest-posts__featured-image.alignleft ~ * {
       	width: calc(65% - 2rem);
       }
       ```
   
 * You can remove your jQuery code and add PHP code inside your child theme instead.
   
   The code below removes the Twentig filter function and adds a custom one. Replace`
   $sizes = '(max-width: 300px) 100vw, 300px';)` with your own value.
 *     ```
       remove_filter( 'render_block', 'twentig_twentytwenty_change_latest_posts_image_sizes' );
   
       function your_custom_change_latest_posts_image_sizes( $block_content, $block ) {
       	if ( 'core/latest-posts' === $block['blockName'] ) {
       		$image = $block['attrs'] && isset( $block['attrs']['displayFeaturedImage'] ) ? $block['attrs']['displayFeaturedImage'] : 0;
       		if ( $image ) {
       			$sizes = '(max-width: 300px) 100vw, 300px';
       			return preg_replace( '/sizes="([^>]+?)"/', 'sizes="' . $sizes . '"', $block_content );
       		}
       	}
       	return $block_content;
       }
       add_filter( 'render_block', 'your_custom_change_latest_posts_image_sizes', 10, 2 );
       ```
   
 * I hope the above is useful to you.
    If you enjoy Twentig, please leave us a review
   🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Latest posts (WordPress block) featured image width’ is closed to new
replies.

 * ![](https://ps.w.org/twentig/assets/icon.svg?rev=2569439)
 * [Twentig Supercharged Block Editor – Blocks, Patterns, Starter Sites, Portfolio](https://wordpress.org/plugins/twentig/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/twentig/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/twentig/)
 * [Active Topics](https://wordpress.org/support/plugin/twentig/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/twentig/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/twentig/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Twentig](https://wordpress.org/support/users/twentig/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/latest-posts-wordpress-block-featured-image-width/#post-13500756)
 * Status: resolved