Pages – Text in Circles

Could you link to the page with the issue?

https://thesuchef.org/?cat=1

https://thesuchef.org/?cat=4

https://thesuchef.org/?cat=6

https://thesuchef.org/?cat=5

Basically all of the pages with categories.

Replace this in your Child Theme style.css file:

.blog .hentry span.hometitle {
 width: 100%;
 position: absolute;
 top: 73px;
 display: table-cell;

 font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
 font-size: 32px;
 font-size: 3.2rem;
 font-style: italic;
 text-shadow: 0 0 10px #fff;
 text-align: center;

 line-height: 1.2;
 vertical-align: middle;
 word-wrap: break-word;
 color: #111;

 overflow: hidden;

 transition: background .4s ease-in-out;
 -webkit-transition: background .4s ease-in-out;
 -moz-transition: background .4s ease-in-out;
 -o-transition: background .4s ease-in-out;
 -ms-transition: background .4s ease-in-out;
}

.blog .hentry {
 position: relative;
}

@media screen and ( max-width: 800px ) {
	.blog .hentry span.hometitle {
		font-size: 24px;
		font-size: 2.4rem;
	}
}

With this:

.hentry span.hometitle {
 width: 100%;
 position: absolute;
 top: 73px;
 display: table-cell;

 font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
 font-size: 32px;
 font-size: 3.2rem;
 font-style: italic;
 text-shadow: 0 0 10px #fff;
 text-align: center;

 line-height: 1.2;
 vertical-align: middle;
 word-wrap: break-word;
 color: #111;

 overflow: hidden;

 transition: background .4s ease-in-out;
 -webkit-transition: background .4s ease-in-out;
 -moz-transition: background .4s ease-in-out;
 -o-transition: background .4s ease-in-out;
 -ms-transition: background .4s ease-in-out;
}

.hentry {
 position: relative;
}

@media screen and ( max-width: 800px ) {
	.hentry span.hometitle {
		font-size: 24px;
		font-size: 2.4rem;
	}
}

Edited

Very nice thanks!