Uptown Style Header Text Not Responsvie

  • Resolved kpatzer

    (@kpatzer)


    8 years, 4 months ago

    I love this theme except for one issue. When it’s viewed on a mobile device the header text cuts words into more than one row. Is there a way to make this header responsive?

    This is my site threestrands.ca

    I apologize for being a complete noob!

    • This topic was modified 8 years, 4 months ago by kpatzer.
Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,
    I checked for you and found everything ok. What you mean by text cut on mobile device. It is working from all device. The theme is responsive.

    Thread Starter kpatzer

    (@kpatzer)

    I think the home page ends up being fine because of the word length. But on the other pages the words get cut in half. I’ve had a lot of comments about it so I think it must be happening on a lot of devices.

    For example ‘Contact Us’ turns into

    Cont
    act Us

    Hi kpatzer,
    I got your expectation. Yeah, this need to be font size responsive. If you can edit your theme slightly then everything will be fine. If you’re not the level to customize your theme I recommend you hire somebody for this small work.

    @media screen command in CSS can make this workable.

    Thanks.

    You can add this to your Child Theme style.css file, or by using a Custom CSS plugin.

    @media only screen and (max-width: 480px) {
    .page-title-container { 
        padding: 0;
    }
    .page-title-container .page-header h1 {
        font-size: 2rem;
    }
}
@media only screen and (max-width: 360px) {
    .page-title-container .page-header h1 {
        font-size: 1.5rem;
    }
}

    Hope this helps.

    Thread Starter kpatzer

    (@kpatzer)

    Thank you so much! I procrastinated on this because I thought it would be hard to figure out, but turns out it was super simple and works great! Thank you so much for the help.

    I have the exact same problem with my website. Did you just enter the above as additional css?

    The post by ThemeSumo helped me a bunch. Usually I Google these types of issues and try several different tips, ultimately wasting a bunch of time and getting nothing accomplished. Their post fixed my issue very quickly and easily.

    I did have to install the Custom CSS plugin they recommended, but other than pasting in the code, it worked instantly and easily. Thanks so much!

    Hi @themesumo!
    Your post helped me with all pages but 1!
    I my Accommodations page, the S in the Header text still falls on a second line on the mobile version. Do you have recommendations?

    Thank you!
    Mary

    • This reply was modified 7 years, 10 months ago by maryprevite.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Uptown Style Header Text Not Responsvie’ is closed to new replies.

Tags