[Resolved] Getting Cover image to display the same on mobile as laptop

[Ben]

New to Generatepress and loving it. I’m trying to get my test domain to display on mobile as it does on laptop. Site is http://www.keepsafestorage.co.uk/

On laptop it looks like this – https://photos.app.goo.gl/QpCoT5ZNoj8ZF3Fq6
On mobile is looks like this – https://photos.app.goo.gl/s1xP4dxgA1TC1UTb8

How do I adjust the mobile version? I want the images on the mobile to be full width but not as tall – Sorry if I am not explaining it very well.
I am at the basic end of WP skills.
Thanks in advance.

[David]

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.

[Ben]

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.

[David]

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.

[Author]

Posts