WordPress Cover Block Less Height on Mobile

I love using the WordPress cover block, but I have always found that it takes up too much height on mobile devices. I solved this problem by adding a class to the cover block that restricts its height and maintains some responsiveness on narrower screens. In my case, I have set the class to kick in at 922 pixels.

The photograph above (© South Coast View) shows GB Railfreight locomotive Alison at Brighton Railway Station in East Sussex.

How to control the height of the cover block on mobile

The screenshot displayed below shows how I added a class called change-height-of-cover-block in the block settings. In the code example below, I added CSS to my child theme, which takes effect when the screen width is 922 pixels or less.

If you are viewing this post on a desktop, you will see a large image of the locomotive above. As you narrow your browser width, the image suddenly reduces in height to 280 pixels. You may need to adjust the pixel height in your additional CSS to better match your image and the values you set in the cover block settings. On mobile devices, the image retains some aspects of the locomotive’s top, right, bottom, and left sides that are visible on a desktop display.

Bonus tip: Stop the cover block image from becoming blurry on mobile

Sometimes, especially when the cover block settings are set to show a tall image, the image may blur on a mobile phone. I found the solution which works for me in this GitHub thread. Scroll down a while, and you will find the following code. Props to HUisHU-Sebastian’s comment on this GitHub thread.

PHP code added by using the Code Snippets plugin

function gb_gh_prevent_responsive_images_on_cover_block( $original_response, $image, $context, $attachment_id ){
	$processor = new WP_HTML_Tag_Processor($image);
	if( $processor->next_tag('img') && $processor->has_class( 'wp-block-cover__image-background' )){
		return false;
	}
	return $original_response;
}
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', 'gb_gh_prevent_responsive_images_on_cover_block', 10, 4 );

If you encounter any issues with the PHP code above, I recommend copying and pasting it directly from the GitHub thread linked above.

Have you been affected by any of the issues above, and did the fix solve the problem? I’d love to see your comments below.

Posts in Computers and Internet. View all in this subject.