Header Text size and color change

Hello, is there css code to make the Header text different size and color?

Here is a screencast for further clarity = https://www.screencast.com/t/whEAgO6Nhy

Thanks

Hi,

Please post a link to your website, so I can give you a working solution to change the text size and color in header.

Kind Regards,
Csaba

Hello,

Thanks for your reply.

Here is a link : http://www.fourteenair.com/AgensureTestSte/

Hi, Also, on that home page after the parallax image element there is a block of white space, how can i remove this? It looks like its at the bottom of every page before the footer, it must be a setting somewhere I am missing -

Thanks

Troy

Hi,

You can make the header-text bigger and change it’s color with this Custom CSS:

.header-text {
    font-size: 22px !important;
    color: red !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hello,

Thanks for the help, I got it to change colors. But now it is rendering very strange on my mobile device. It renders great on Desktop, but the text is scrolling below header on mobile, here it is: http://www.fourteenair.com/AgensureTestSte/

Did my code interfere with the rendering?

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

.header-image::after {
background-color: transparent;
}

.main-content {
padding-top: 50px !important;
padding-bottom: 3px !important;
}

.hentry {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

.hentry .entry-footer {
margin: 0 !important;

}

.header-text {
font-size: 21px !important;
color: !important;
font-weight: bold;
}
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Hi,

Please post a screenshot about the issue on mobile, so I can check.

Kind Regards,
Csaba

Hello,

Thanks for your help, I appreciate it!

Here is the screenshot: https://www.screencast.com/t/rJLv5dh7rK45

Hi,

You can fix the mobile header issue with this Custom CSS:

@media only screen and (max-width: 991px) {
.header-image {
    height: 500px !important;
}
}

@media only screen and (max-width: 479px) {
.header-image {
    height: 580px !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Hi csaba,

That worked out great! Thanks as always!

Troy

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba