Making Header Text Two Lines vs. One on Mobile

  • Unknown's avatar
    naughtynaughtypolitics · Member ·

    Hey everyone,

    My apologies if this has already been addressed. Couldn’t find it after a pretty thorough search.

    My site name, Naughty Politics, shows up on my laptop looking clean, with both words fitting on the screen side-by-side. But when I look at the site on my phone, it drops part of “Politics” to a second line after splitting it with a hyphen: “Poli-tics.” Does anyone have any idea how force the second word to drop to second line for people viewing on their phone?

    Push, comes to shove, I’d be willing to move the second word to a second line on laptop/desktop and mobile. I’d prefer not to, but if it’s not possible to force the site to cater to phone users, so be it. If impossible, I’ll need help figuring out how to drop “Politics” to a second line, because I can’t find the code for that either.

    Any help will be much appreciated. Thank you!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Add the following to your custom CSS. 

    .site-title, .site-description {
    hyphens: none;
    word-wrap: initial;
}
  • Unknown's avatar
    naughtynaughtypolitics · Member ·

    Thanks for the quick response, Richard. For some reason, though, it’s not working. I’m still getting the hyphen on my phone. The words “none” and “initial” are showing up as red. Any thoughts on a correction?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, this is what I see on my iPhone 5s with the latest iOS: https://cldup.com/uJdp8Fk_sk.PNG .

    What phone/browser/OS are you on?

    I would suggest clearing your phone browser cache and then take another look. Phones and wireless providers rely heavily on caching to minimize bandwidth usage. Let me know if that does the trick and if not, post the information above.

  • Unknown's avatar
    naughtynaughtypolitics · Member ·

    I’m using a iPhone 6. I cleared the cache and tried both Safari & Google and it’s still coming up with it split. I’ve asked a few other friends who have phones that aren’t iPhone 6s to look, and they’re seeing it properly, without the split. Weird. Thanks for your help! If you think of another way to fix it for all phones, it’d be much appreciated to learn about it.

  • Unknown's avatar
    thesacredpath · Member ·

    Ok, let’s try to force things. Add the !important keyword to both of the declarations so that it looks like this. 

    .site-title, .site-description {
    hyphens: none !important;
    word-wrap: initial !important;
}

    What version of iOS are you on?

  • The topic ‘Making Header Text Two Lines vs. One on Mobile’ is closed to new replies.