Changing the font size of the Site Title for Mobile Devices

• 

  ericsteventerry · Member · Jul 12, 2021 at 3:27 am

  • Copy link
  • Add topic to favorites

  I’m attempting to change the font size of the Site Title in the Natural theme because when viewed on mobile devices, the text wraps around, splitting words in the title in half instead of moving them to the next line.

  ericsteventerry.com

  Any help would be appreciated. I’ve attempted to add some CSS, but it has no impact whatsoever:

  @media screen and (max-width:414px) {
  .site-identity .site-title {
  font-size:20px;
  }
  .header-media .entry-title.section-title {
  font-size:26px;
  }
  }

  The blog I need help with is: (visible only to logged in users)

• 

  kokkieh · Staff · Jul 12, 2021 at 9:57 am

  • Copy link

  Hi there,

  If your main goal is to not have the title create a line break in the middle of a word, this will do the trick:

  @media screen and (max-width: 767px) {
    h1.site-title a {
      word-break: normal;
    }
  }

  But if you prefer to resize the title as well on mobile devices, you can use this instead:

  @media screen and (max-width: 767px) {
    h1.site-title a {
      word-break: normal;
      font-size: 80%;
    }
  }

  Change the font-size value to whatever you prefer.

  Also note that your plan gives you access to both live chat and direct email support for help with questions like this one. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

• 

  ericsteventerry · Member · Jul 12, 2021 at 1:09 pm

  • Copy link

  That worked. Thank you very much!