How to Change the Font Size for the Site Title

Illdy
1

I need to know how to change the font SIZE for the site title, not necessarily the font family. (Right now the site title is too large to display properly on mobile devices without cutting words in weird places.) If you can please provide step by step directions for how to do this, that would be very much appreciated. Really need this information today in order to make this site live.

Also need to know how to make the button a solid color in the jumbotron section on the home page please.

(It seems like I only receive a reply when a new question is first posted, so I’m starting a new thread here.)

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to make the changes by going to Appearance > Customize > Additional CSS and pasting it there.


/*Mobile title size*/
@media screen and (max-width: 500px)
body #header .bottom-header h1 {
    font-size: 30px;
}

/*Solid button color*/
#header.header-front-page .bottom-header .header-button-one {
    background-color: red;
}

Best Regards,
Support

3

Thank you, but I’m getting the following error:

“Unexpected token ‘body’ at line 13, col 1.”

Here’s all the CSS I have so far:

/Remove skill bar/ #about .skill .skill-top .skill-progress-bar {
display: none;
}

.site-title, .site-description {
font-family: abel;
}

/Mobile title size/
@media screen and (max-width: 500px)
body #header .bottom-header h1 {
font-size: 30px;
}

/Solid button color/
#header.header-front-page .bottom-header .header-button-one {
background-color: red;
}

4

Hello there,

I am sorry for the inconvenience caused here.

I am not able to see an error in the code here, could you please add a full screen image of the issue so that I can see where the error is.

Best Regards,
Support

5

Hello there,

I am sorry for the inconvenience caused here.

I am not able to see an error in the code here, could you please add a full screen image of the issue so that I can see where the error is.

Best Regards,
Support

6

Sure - here are a couple screenshots that show the issue.

7

Hello there,

Thanks for adding the image.

Simply add a period before the word ''body" so the code should look like this:


/*Mobile title size*/
@media screen and (max-width: 500px)
.body #header .bottom-header h1 {
    font-size: 30px;
}

Let me know how this works for you.

Best Regards,
Support

8

Thank you, but now I’m getting the error: “Expected LBRACE at line 11, col 1”
(the line that starts with: .body #header)

9

Hi there,

In order to make sure there are no more errors, please replace that whole code for the logo text with this one:

        @media screen and (max-width: 500px) { body #header .top-header .header-logo {
    font-size: 25px; } }

The problem was that you were missing a couple of curly braces.
Give this a go and let me know how it goes!

Best wishes,
Mihaela

10

That worked - thank you! Now if we can just shorten the vertical space between lines since the text is smaller, that should wrap things up.

11

Hello,

Could you please send me your website’s url to take a look?

All the best,
Mihaela