loosing responsiveness

Having the exact same issue. I really hope there is a fix for this soon.

@jmills616, It’s unclear what you want to do about this issue. Do you want to break your word so that it doesn’t make sense any more? Do you want to reduce the font size so that the word fits in?

It’s not exactly a bug.

Thanks for replying Andrew.

I simply want the title words to reduce and stack AND the background block to reduce with perfect left/right, top/bottom margins showing the background image.

It does this perfectly when I have two words of the my business title: “THE CENTER”

…but when I add the other remaining words that’s when I get what’s shown in the image link in my original post above. The business title is:

“THE CENTER FOR PAIN MANAGEMENT”

I’ve spent days experimenting with settings. I created over a dozen subdomains and installed WordPress and the Hemingway Theme on each so I could tweak this and that to try to fix this issue. Whether you call this a “bug” or not, it is a problem when I’m limited to a certain number of words before things start getting cut off while viewing on mobile devices.

I can’t replicate the issue with the words, “The center for pain management”. You’ll have to link the website

Ok…here is the link. I recreated everything (the font I’m using is called Cinzel.

https://wp2.serenityvalleyretreat.com/wp/

Here it is displayed (simulated) on a iphone 5:

https://mobiletest.me/iphone_5_emulator/#u=https://wp2.serenityvalleyretreat.com/wp/

Here you’ll see ALL the mobile display choices display the title text and block cutting off on the right side and that ugly horizontal scroll slider appearing (plus if you do scroll it’s a black background):

LINK

Does the theme allow you to change the font size & font family of this title text?

If not, have you considered undoing those modifications to that section? The theme’s original CSS seems to work fine for this: https://snag.gy/vcDaO.jpg

Hi Andrew,

Thanks for looking into this.

Yes, I created several installs of this theme on many temporary subdomains I created for experimentation. Back and forth copy and pasting, page refreshing, etc.

It appears this issue has something to do “limiting the font size” of whatever font you choose. Here is the CSS section that enables you to make adjustments:

.blog-title a {
color: #FFF;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
font-size: 2.75em; (Increased from 1.75em)
}

Try increasing the font-size (as shown above) of the original Theme Font. The font style doesn’t seem to matter.

As you scale the browser screen UP the font increased in size when you scale DOWN to an iPhone5 size the scaling stops and you get the CUTTING OFF of both the text, background block & background image.

I’m guessing the solution is an adjustment somewhere in the “responsive” area of the CSS or PHP. Maybe also font weight have something to do with it? The font chosen is from “Google Fonts”. I tried other ways of embedding fonts with the same results. Calling the font style from my server vs Google fonts made no difference. The “Font Plugins” were awful to work with and limiting.

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

Alternatively use your Child Theme style.css file to hold your CSS modifications:

@media screen and (max-width: 321px) {

    .blog-title a {
        font-size: 1.5em;
    }

}

THANK YOU ANDREW!!!!!!!!!!

That was the trick. You da man. ??