Responsive text in headers

[whitelobster11]

Hello

All of the posts on my site suffer from long words being chopped with dashes inserted into them and wrapped to the next line when viewed on mobile

I have struggled to get a clean easy way to simply make the titles on my posts resposively resize on mobile

Is there some simple way to impelement this so that it will no longer be an issue? It seems like it should be relatively straight forward to implement responsive header texts in all of my posts when viewed on mobile~ I just have not been able to figure out how and all of the tutorials I have seen in the forums seem so complicated

You can see a post on my site on this page

International Intrigue

If viewed on mobile you will see the problem

Login info attached below

Thank you so much!!!

[thai]

Hi Jared,

To remove the hyphenation in your texts, please add this custom CSS under Theme Options > CSS:

.entry-content.content h2,
.entry-content.content h3,
.entry-content.content h4 {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

To reduce the size of your headlines on mobile view, please add this custom CSS as well:

@media (max-width: 480px){
	.entry-content.content h2 {
		font-size: 24px;
	}
	.entry-content.content h3 {
		font-size: 20px;
	}
	.entry-content.content h4 {
		font-size: 16px;
	}
}

About the media query: https://www.w3schools.com/css/css3_mediaqueries_ex.asp.

Hope it helps