Welcome Area Spacing/Font Size

Is there a way to change the spacing of the text in the welcome area? I would like to move it up a little bit. Since I added a longer welcome message the call to action button gets cut off on some mobile devices. I am hoping to fix this by changing the spacing, but I could also reduce the text size slightly but I do not know how to do that either. Any help would be very appreciated!

I did see this old thread, Welcome Area Title and Message Size

but if I do that the font does not adjust on mobile devices :frowning:

Hi,

Can you share your site URL here?

I came up with a solution, although my question now is - is it a good one? I added the following css to the ‘Additional CSS’ in customizer;

.welcome-desc {
line-height: 1;
}
.welcome-info {
top: 10%;
}

making these two changes allowed it to fit on the page on most mobile devices. do you want a screenshot from my iphone?

This is the link to the IPhone screenshot

https://drive.google.com/open?id=1WQCdxWIIOji74Z-ZTLptmFs0wTZt_UOQ

Hi,

Please remove your code in above and use this code instead:


@media (min-width: 1200px) and (min-height: 1024px){
	.welcome-info{
		top: 350px;
	}
}

@media (max-width: 1024px){
	.welcome-info{
		top: 150px;
	}
	.welcome-title{
		font-size: 60px;
	}
}

@media (max-width: 820px) and (orientation:landscape){
	.welcome-info{
		top: 20px;
	}
	.welcome-title{
		font-size: 40px;
	}
}

@media (max-width: 768px){
	.welcome-info{
		top: 50px;
	}
	.welcome-title{
		font-size: 50px;
	}
}
@media (max-width: 740px) and (orientation:landscape){
	.welcome-title{
		font-size: 35px;
	}
	.welcome-desc{
		font-size: 20px
	}
}

@media (max-width:425px){
	.welcome-title{
		font-size: 24px;
		margin-bottom:20px;
	}
	.welcome-desc{
		font-size: 14px;
		margin-bottom:20px;
	}
	.welcome-button{
		font-size:12px;
		padding: 8px 13px;
	}
}
@media (max-width:400px){
	.welcome-title{
		font-size: 22px;
		margin-bottom:10px;
	}
	.welcome-desc{
		font-size: 14px;
		margin-bottom:10px;
	}
	.welcome-button{
		font-size:12px;
		padding: 8px 13px;
	}
}

Regards,
Awan

1 Like

Thank you so much! Looks so nice on mobile now, I knew that their was a
better solution than my hack (but I am just learning).

Understanding how to adjust for screen size using css will be invaluable, I’m sure!

I really appreciate your help Awan!

1 Like

It depends on what font you wish to change to. If it is a font that is installed on all computers, such as listed, then it is just a matter of replacing and/or adding the font declaration with the font stacks shown for the title and tagline like this (assuming you want both the same font family.

.site-title a, .site-description {
font-family: Tahoma, Geneva, sans-serif;
}

If you wish to use a font that is not installed by default on all computers, then the easiest way is to use a font plugin, such as [Germanic runic translator], or one of the other font plugins.