Need to make welcome area words responsive

Hi,

My website is http://factor8.com/

Yesterday I made the words that come up only show up to half the page so that I could add an image of a person on the left. To achieve this, I added CSS:

.welcome-desc h1, .welcome-desc h2, .welcome-desc h3 {
    width: 60%;
}

But now, when the site scales down, the words disappear. Can you tell me how to make sure those words and button remain responsive?

Thank you so much in advance!!

Hello MMyers,

By default, welcome-description and welcome-button are hidden on 600px screens and less.

The following CSS code might help to make those elements visible on all screens. However, it should work only on default Moesia header, your header is reworked, so I think that it will not work in your case.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

.welcome-desc {
    display: block !important;
}

.welcome-button {
    display: inline !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks for sending me here.

I have added this to CSS plugin and more of the welcome page is there.

However, the call to action button is not fully visible, any suggestions?

Hello @danclayton1234,

Can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Hello @danclayton1234,

Please try to use the following CSS code as well.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

header#masthead,
img.header-image {
    min-height: 320px;
}

Kind Regards, Roman.