Getting Cover image to display the same on mobile as laptop

Hi there,

this would require the Top/Bottom Padding of the cover block to be reduced on mobile and also the Font size. Neither of which are an option in the Cover Block.

I would recommend using the GenerateBlocks plugin:

https://wordpress.org/plugins/generateblocks/

Instead of the Cover Block you would:

1. Add a Container Block.
2. Inside the Container Block - add a Headline Block
The Headline Block can have a link attached to it like a normal line of text.

Then select the container block and in the Settings Sidebar > Background add your Image.

https://docs.generateblocks.com/article/container-overview/#background-image

Then in Settings Sidebar > Spacing set the Top and Bottom padding. You will see there is an option for Desktop | Table | Mobile. You can give the Mobile version a smaller amount of padding.

https://docs.generateblocks.com/article/container-overview/#spacing

Liekwise you can select the Headline block and change its font size for Mobile:

https://docs.generateblocks.com/article/typography-overview/

Once you have created one Container, and it looks correct on all devices you can duplicate the Container Block from the toolbar 3 dots menu. And simply change the background and headline.

Thanks for this reply. Probably a bit too involved for me. I will live with the inconsistency for now. I had hoped it was a simple button I had missed. This change will go in my task list for a freelancer with more experience than me to tackle. Thanks again.

You can try adding this CSS:

@media(max-width: 768px) {
    .wp-block-cover {
        min-height: 150px !important;
    }
}

https://docs.generatepress.com/article/adding-css/

It will apply to all cover blocks though - and all it does is reduce the height of them on mobile. Might do the job.