Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Robert Young
11,742 PointsCanvas 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!
Thanks,
Robert
3 Answers
Kevin Korte
28,148 PointsI 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.
Robert Young
11,742 PointsCheers, 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
28,148 PointsAs 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. :)