Archived topic
Larger cover page letters on laptop but not on mobile
3 replies · Started by Ben on October 13, 2020
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
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;
}
}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
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;
}
}