Premium Theme Support › Pro Theme Design › Beacon

How to make main page H1 smaller on mobile

  • Author
    Posts
  • #157142
    jamphotographynz
    Member

    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)

    #157151
    binarymoon
    Theme Author

    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

    #157173
    jamphotographynz
    Member
    Original poster

    That one didn’t work for me, is there anything else I could try? :)

    #157195
    binarymoon
    Theme Author

    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

    #157211
    jamphotographynz
    Member
    Original poster

    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?

    #157212
    binarymoon
    Theme Author

    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.

    #157213
    binarymoon
    Theme Author

    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.