• Resolved evan7794

    (@evan7794)


    I’m hoping there is someone out there who can help me with this concern. I like the look of my main title with the larger font size however it appears excessively large on mobile. On desktop the font is ridiculously small. Here is the additional CSS I added to make the font size change. Where did I go wrong?

    h1.site-title a {
    font-family: ‘Lobster’, sans-serif;
    font-size: 1.9rem;
    }
    h1.site-title {font-size: 4rem;
    }

    My website is https://lostandlooking.com/

    Thanks so much for any ideas!

    Evan

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Have a read up on media queries. There’s an example here (about half way down the page) to do what you want: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    The actual size of the font is the same: 1.8rem on all screen sizes. It only APPEARS to be “excessively large” on mobile and “ridiculously small” on desktop because of the devices respective sizes, and also because the mobile version is transformed to uppercase, whereas the desktop version is not.

    The font size of 4rem from h1.site-title is totally ignored because that code is for H1 without a hyperlink. Since your site title is hyperlinked, the more specific h1.site-title a is used hence 1.8rem.

    First, if you want to transform the desktop version to uppercase as well, you can add text-transform: uppercase to your h1.site-title a so you’ll have:

    h1.site-title a {
    font-family: ‘Lobster’, sans-serif;
    font-size: 1.9rem;
    text-transform: uppercase;
    }

    If, INSTEAD of transforming the desktop version to uppercase, you want to PREVENT the mobile version from being transformed to uppercase, just change the uppercase in the code above to none .

    Now on having different font sizes for desktop vs mobile, replace the font-size value above to whatever you want for DESKTOP. And on smaller screens, use the following (change the font-size value to whatever you want for MOBILE screens only):

    @media (max-width: 767px) {
    h1.site-title a {
        font-size: 1.9rem;
    }
    }

    (Note that the above code uses your theme’s definition of a “mobile” as being a device with a maximum screen width of 767px)

    • This reply was modified 4 years, 6 months ago by George Appiah. Reason: Fixed a typo and added code formatting

    yes it’s possible to have to different font size for different screen sizes..and if you are not familiar with coding and find it hard to understand there are various plugins which will give you options to hide things on different screens….and this way you will have different sizes for diffrent screens

    Thread Starter evan7794

    (@evan7794)

    Thanks for everybody’s help! This forum is awesome! And especially thank you to George Appiah for that coding! It worked perfectly!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Is it possible to change title font for mobile and desktop seperately?’ is closed to new replies.