[Resolved] Larger cover page letters on laptop but not on mobile

[Ben]

Hi, I wonder if you can help me – I may have missed a button to do this – perhaps you can point me in the right direction.

I want to have larger text on my cover page images on a laptop but not on a mobile.

How do I do this? Here is my home page. http://www.keepsafestorage.co.uk/

See how the word “Domes” – (which is in Red to show up for the moment) – I can see how to make it bigger but by doing this it becomes too big on mobile.

Is there a way to do this? Thanks

[David]

Hi there,

try adding this CSS – it applies to wherever the large ( huge ) font size is selected:

@media(max-width: 768px) {
    .wp-block-cover .has-huge-font-size {
        font-size: 24px;
    }
}

[Ben]

Thanks for this. However – I may not have been clear – I want the cover page text to be much bigger – Like this – (which used custom size) http://www.keepsafestorage.co.uk/ See “Domes” on the top of the home page in red.
I wanted this to be smaller on mobiles. I have tried changing the CSS – Changing the word huge to custom but I can’t get it to work.

This is what I tried –

@media(max-width: 768px) {
.wp-block-cover .has-custom-font-size {
font-size: 24px;
}
}
Any ideas?

Thanks

[David]

You can use the preset ( huge ) size that you’re using on the other cover blocks and add this CSS:

/* Desktop size */
.wp-block-cover .has-huge-font-size {
    font-size: 100px;
}
/* Mobile size */
@media(max-width: 768px) {
    .wp-block-cover .has-huge-font-size {
        font-size: 40px;
    }
}

[Author]

Posts