How to make main page H1 smaller on mobile

jamphotographynz · Member · August 6, 2020 at 10:32 pm
Copy link

Add topic to favorites
Hey Ben,

Hope you’re good!

How can I make the title on this page smaller for mobile only? I thought I changed it but it didn’t work

https://findhoward.com/

Thanks!

Anna

The blog I need help with is: (visible only to logged in users)
binarymoon · Theme Author · August 7, 2020 at 10:10 am
Copy link
Hi Anna

This happens automatically with the default styles but since you’re using the custom sizes through the block editor it’s a little more fiddly.

The easiest thing to do would be to add some custom css. The following should help:
```
@media only screen and ( max-width: 600px ) {
    .has-large-font-size {
        font-size: 26px;
        line-height: 1.2;
    }
}
```
Thanks – Ben
jamphotographynz · Member · August 8, 2020 at 7:48 am
Copy link
That one didn’t work for me, is there anything else I could try? :)
binarymoon · Theme Author · August 10, 2020 at 2:23 pm
Copy link
It looks like you’ve changed the block, so the css won’t apply :)

The way it’s setup currently, there’s no way to change the font size. It’s a center aligned paragraph with a fixed size font, so the font will always be the size you have specified.

For page titles you should use the header (or heading? I forget) block. Set this to a h1, and then only use 1 h1 per page (which is what you should do from a semantic point of view). Then the following css will work:
```
@media only screen and ( max-width: 600px ) {
    .entry-single h1 {
        font-size: 26px;
        line-height: 1.2;
    }
}
```
Thanks – Ben
jamphotographynz · Member · August 10, 2020 at 9:53 pm
Copy link
Hey, that makes sense. I’ve hidden the title element because I want the Menu to have a different name to the heading on the page. Is there any way around that?
binarymoon · Theme Author · August 10, 2020 at 11:07 pm
Copy link
No problem with hiding the main page title. That makes total sense.

When you add a block you can add it as a heading. In fact if you have a paragraph block, which you appear to be using currently, you can convert it to a heading. Do this by pressing the paragraph icon (a back to front P) in the toolbar and then selecting heading from the list. If you set it as a h1 in the block settings then the code I gave you should work.
binarymoon · Theme Author · August 10, 2020 at 11:09 pm
Copy link
Oh – if you’re having trouble doing this then you can always ask WordPress.com support. They can access your site and make the change for you – which is something I can’t do.

Since you’re a premium/ business customer then I believe you can access live chat here:
https://wordpress.com/help/contact

The topic ‘How to make main page H1 smaller on mobile’ is closed to new replies.

WordPress.com forums

How to make main page H1 smaller on mobile