Support » Theme: Spun » Pages – Text in Circles

  • Resolved suboy7

    (@suboy7)


    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)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Could you link to the page with the issue?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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!

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