Pages – Text in Circles

  • Resolved suboy7

    (@suboy7)


    10 years, 6 months ago

    Hello again,

    Is there an easy fix for getting the text to appear in the circles just like in the home screen? Right now, the text is showing up underneath the circles but I would like it the be the same as in the home screen. I have a child theme in place as well. Here a screen shot of the issue: http://snag.gy/XRSek.jpg

    Thanks!
    Alex

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    Could you link to the page with the issue?

    Thread Starter suboy7

    (@suboy7)

    10 years, 6 months ago

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

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

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

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

    Basically all of the pages with categories.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    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

    Thread Starter suboy7

    (@suboy7)

    10 years, 6 months ago

    Very nice thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Pages – Text in Circles’ is closed to new replies.