Support » Theme: Hemingway » loosing responsiveness

  • Resolved jmills616

    (@jmills616)


    Here is an image of a side to side comparison of what’s happening.

    As soon as I ad more words into the “Header Block” area (Title) I loose the clean even margins on the sides and that darn ugly scroll bar appears below when I pull up the website on my iPhone or test with other devices. If you were to actually “scroll right” you’ll find the hidden area shows up as totally black space.

    I spent a day or more going over the Theme css and php to attempt to figure out how to fix this but can’t. Any assistance would be appreciated. Thanks

    I was going to provide a link but this an empty clean install of the Hemingway Theme and Zero alterations have been applied. I simply added words to the title to reproduce the problem. I love this theme but the primary reason I thought it would work is it’s clean responsive behavior.

    https://wordpress.org/themes/hemingway/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Having the exact same issue. I really hope there is a fix for this soon.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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.

    Thread Starter jmills616

    (@jmills616)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter jmills616

    (@jmills616)

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

    http://wp2.serenityvalleyretreat.com/wp/

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

    http://mobiletest.me/iphone_5_emulator/#u=http://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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter jmills616

    (@jmills616)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 http://wordpress.org/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;
        }
    
    }

    Thread Starter jmills616

    (@jmills616)

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

    That was the trick. You da man. 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘loosing responsiveness’ is closed to new replies.