CSS fix for h1 style heading word break on mobile view of homepage

  • In the mobile view of my homepage, a longer word in an h1 style heading gets broken between two lines. I would like words to remain whole i by eliminating the word break or reducing the font size for the mobile view only. All of the fixes I’ve searched and tried have failed. WP and CSS beginner — would love some help!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please remove your coming soon blocker so we can see this and offer some help.

    Thread Starter dmmw

    (@dmmw)

    thanks for reply. I’ve launched the site and the homepage should be viewable. However, for some reason, if you navigate away using one of the links, and try to go back, the coming soon blocker will still appear.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The problem is the word “Communications” is just to large in that font. I cut the size by a couple of pixels and it seems to work better.

    @media?(max-width: 767px) {
        .skt-fse-sec h1?{
           font-size: 36px !important;
          }
    }

    To add or override CSS: use the “Additional CSS” option in the customizer.  https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress or at [site]/wp-admin/customize.php if you don’t have that menu option.

    Use the?Chrome Developer Tools?or?Firefox Developer Tools?to help you see and test changes to your CSS.

    View post on imgur.com
    Thread Starter dmmw

    (@dmmw)

    Thank you Steven, much appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS fix for h1 style heading word break on mobile view of homepage’ is closed to new replies.