Title does not fit on mobile site

  • Hi
    Whenever I increase the title size above what it is now the title text does not fit on the mobile screen. It looks fine on a desktop.For now I have reduced the font size but smaller screens still have an issue.
    I have tried entering this code in in the CSS box but it did not seem to do anything. 

    @media (max-width: 480px) {
.header-filter {
background-size: contain;
background-repeat: no-repeat;
}
}

    Is there a way to have the title automatically adjust to screen size?

    I am using MANUAL theme and the website is done aside from this. Any help would be hugely appreciated.

    • This topic was modified 4 years, 10 months ago by mehkas.
    • This topic was modified 4 years, 10 months ago by Steven Stern (sterndata).
    • This topic was modified 4 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

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

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello @mehkas

    When you say the title doesn’t fit, do you mean you’d like the text to wrap to fewer lines on mobile? I did also notice there are inline-styles on the heading that add some !important rules which you won’t be able to override in your stylesheet. The font size is set to px!important but doesn’t have an actual pixel number attached to it there so it falls back to your style on h1.inner-header which is set to font-size: 42px!important

    Thread Starter mehkas

    (@mehkas)

    Hi. Thank you for the message.

    The main problem is the ‘immunomodulators’ page. The whole word does not fit on the screen, so it looks like some words are missing e.g. immunodulato
    Any ideas how I could resolve it?
    Thanks

    @mehkas Ah I see the issue; I’m not sure what is causing it but you have something causing a horizontal overflow. So for a quick fix you could add this to your stylesheet: html,body { overflow-x: hidden };

    Thread Starter mehkas

    (@mehkas)

    @cdcampbell26 do I add by entering into the CSS section? I am not sure how to access the stylesheet :S

    So if you have somewhere you’ve been adding CSS to the site, that’s where you would add that. If you don’t have access to your website’s theme files, it’s probably best to download a custom CSS plugin like this https://www.ads-software.com/plugins/simple-custom-css/ once you activate it you can add the CSS I posted to it. You can also go to Appearance > Theme Editor and add it to the style.css there, though I wouldn’t recommend editing code directly in the Theme Editor like this, especially if you don’t have much coding experience. Let me know if you run into any problems and if you’re able to get it resolved!

    Thread Starter mehkas

    (@mehkas)

    added it into the CSS section but it didn’t seem to work unfortunately.
    Thanks anyway!

    It looks like it partially worked; I think if you now add the following CSS to what you already added it should fix it up for you! It does decrease the font size some though because your word is so long it won’t fit nicely.

    .h1.inner-header {
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: 32px !important;
}
    Thread Starter mehkas

    (@mehkas)

    It seemed to add a second grey scroll bar on the desktop. It’s not fitted on the mobile screen. How bizarre…. I’m completely out of my depths here; is it better to just remove?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Title does not fit on mobile site’ is closed to new replies.