Adjust Mobile Browser Site Title Text Size

[seoskyrocket]

I widened the site title text area on non-mobile browsers and it looks the way I want it to look (both the site title and tagline displaying on one line). On mobile browsers, however, both the site title and the tagline are on two lines. Is there a way to control that? Thanks in advance for your help!

https://www.sylvaniachurch.com

[Marcy]

.site-title {
font-size: 34px;
}
is what defines the size of "Sylvania Church".

You could add that in one of the @media sections or add a new one, that makes the font-size smaller than 34px.

.site-description {
font-size: 16px;
}
is the size of "A Christ-Centered Reformed Baptist Church".
You could make it smaller at smaller screen sizes in the last @media section too.

One other thing that you could do, is to give the .title-area a width of 100% at smaller screen sizes, and maybe the text would fit better.

It looks to me like you are using a custom CSS editor? If not you can edit your style.css.
Just find the @media only screen and (max-width: 480px) { section.

So you could try this below what you added in the custom CSS editor:

.title-area {
    width: 350px;
}

@media only screen and (max-width: 480px) {

	.title-area {
		width: 100%;
	}

       .site-title {
               font-size: 28px;
       } 

	.site-description {
               font-size: 14px;
      } 
}

---

Marcy | Amethyst Website Design | Twitter

[seoskyrocket]

That worked! Thank you for your help!

[Author]

Posts