I love using the WordPress cover block, but have always found that this block 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.
This cover block image is less high on mobile
The photograph above (© South Coast View) shows locomotive Alison at Brighton Railway Station in West Sussex.
How to control 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 into my child theme, effective when the screen width is 922 pixels wide or less.
/* On narrow screens force less height of cover block */
@media only screen and (max-width: 922px) {
.change-height-of-cover-block {
min-height: 280px !important;
}CSS code to control height of the cover block on mobile.
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 will probably need to adjust the pixel height in your additional CSS to better suit your image and the values you have added in the cover block settings. On mobile devices, the image retains some top, right, bottom, and left aspects around the locomotive that can be seen on a desktop display.
Bonus tip: Stop cover block image becoming blurry on mobile
Sometimes, especially when the settings in the cover block 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 have any problems with the above PHP code, I suggest you copy and paste it directly from the GitHub thread linked to above.
Have you been affected by any of the issues above and did the the fix solve the issue? I’d love to see your comments below.
Subscribe to future posts by email. No spam, just an email when a new post is published. View the posts.
Related articles in Computers and Internet. View all in this subject.
Round-up post about Telex
Darken Image on Hover – Simple With 2 Blocks of CSS – No Plugin Required
WordPress Gallery Block Images With Captions Are Blurry
