Change font size of site title

  • I changed the font size of my site title because it was wrapping to a new line and leaving an orphaned word. I found the following code under my CSS file:

    .site-title {
    font-size: 27px;
    font-size: 2.7rem;
    line-height: 1.1852;
    }

    Do I need to change both the 27px and 2.7rem sizes? I changed only the rem and it worked, but I am worried about compatibility issues if I don’t change the other one.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter nrepair

    (@nrepair)

    Also, can someone explain what the rem size means? Thanks!

    I’m new to wordpress, and not much css experience either.

    Similar question, but I wanted to change the font size of the site-title only for mobile devices – make it smaller so it fits on one line.
    I created the child theme and it is working.

    But it’s that first occurrence of each element that controls iPhone, right? Then larger devices are covered inside the @media sections?

    So to change iPhone only, and leave all other devices to the theme default, I have to have each of the @media sections in my child theme style sheet — just with the site-title class selector – and use the same values as in the base theme.

    If I don’t copy those defaults into my child theme, then my smaller font override will be used on every device.

    It seems wrong to have so much of the base theme copied into the child, but I couldn’t find a way to make it work.

    Question: is there a better way?

    /* ajs: so this is for mobile – the one I really want to override */
    .site-title {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.4;
    }

    .entry-title {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.12;
    margin-bottom: 0.8em;
    }

    /* ajs: all these others have to be set same as in the delivered theme. */

    /**
    * 15.1 Mobile Large 620px
    */

    @media screen and (min-width: 38.75em) {

    .site-title {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.0909;
    }

    .entry-title {
    font-size: 35px;
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.2em;
    }

    }
    … etc for each @media

    https://www.whatalanhadforlunch.com/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change font size of site title’ is closed to new replies.