Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Canvas theme: Header title size issue/widget issue

Hi there,

I am building a site for a client using the canvas theme in a similar way to the method I was shown in the 'customizing a Wordpress theme' tutorial, (Zac Gordon), and I have run into a sticky wicket. The size of the header h1 element changes drastically on the homepage compared to all the other pages of the site.

In itself, this is not a problem, but it is making the nav menu drop slightly, thus moving the search form widget (which is relatively positioned above the nav bar) out of place on the homepage.

Ideally I would like the size of the text on the homepage to stay the same across the site, so that the search form remains in place. Is this a default canvas theme feature?

The site is at: http://somers.young1.org/

I have applied custom css to the site title element, but this does not seem to have made a difference:

logo .site-title a, #logo .site-title h1 {

font-family: 'Orbitron', sans-serif;
color: #446699;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 1.1em;


logo .site-description {

font-family: 'Marck Script', cursive; color: #446699; display: block; margin-top: 20px; font-size: 1.2em;


Any solution to this would be much appreciated!



3 Answers

Kevin Korte
Kevin Korte
28,109 Points

I was screwing with your site on chome's developer window, and I fixed your problem without changing a line of CSS. On the home page, your HTML structure looks like

<h1 class="site-title"><a href="http://somers.young1.org/">Longley Antiques</a></h1>

however, on the other pages were the title was smaller, your structure is.

<span class="site-title"><a href="http://somers.young1.org/">Longley Antiques</a></span>

When I just simply changed the span tag to a H1 tag, problem solved.

So is this bit of code not in the header.php file? Or how are you getting two different title markups to the screen? I'ts possible, but I'm just curious how your file structure is set.

Cheers, Kevin. I appear to have fixed it - I just made sure 'span' was included near the top of the default 'style.css' file, and it was the same font size as h1.

h1, span { font-size: 2em;


Kevin Korte
Kevin Korte
28,109 Points

As long as you don't use spans anywhere else. That will make the font size of all spans 2em, which could be dangerous. At least you know the issue, and can get it fixed. :)