Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been wracking my brain with this all afternoon. I successfully replaced #site-title with an image using CSS, and it looks fine when browsing on a desktop, but i'd like to have the entire site be responsive (i'm using twenty twelve after all!).

The thing is, in order to replace #site-title in CSS, you have to apply fixed dimensions. Using "100%", "auto", etc just wipes the image from the page entirely. I've also attempted to add "width: 100%;" to #page, it's parent, to no avail.

Any ideas?.

share|improve this question
add comment

closed as off topic by s_ha_dum, Wyck, Michael, brasofilo, toscho Jan 7 '13 at 21:46

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

Again and again I see templates using H1 as a image background with nothing within the Tag itself, while this isn't bad SEO it's not good either. A header tag should be TEXT and be readible by Google and other search engines.

If you take a look at your

your see that there is nothing in it - You should resolve this first off by using a text indent.

Correct Your H1

<h1><a class="customlogo" href="http://www.ctwinvestmentgroup.org/" title="Return Home">CTW Investment Group<a></h1>

Add this to your CSS

.customlogo {
    background: url("http://www.ctwinvestmentgroup.com/wordpress/wp-content/uploads/2013/01/CtWDiamond3.png") no-repeat scroll 0 0 transparent;
    height: 101px;
    width: 500px;
    text-indent: -9999em;
    display: block;}

Now for Responsive to work with Background images you have 2 options to serve a different image for each device size or serve the same image but resized.

To do this you use Media Queries

Devices Below 768px we divide the logo by 2/3's

@media (max-width:768px){
.customlogo {
    height: 67px;
    width: 333px; }    
}

Devices Below 480 we half the logo

@media (max-width:480px){
.customlogo {
    height: 51px;
    width: 250px; }
}

Additional Notes:

Your site is not working as responsive presently since you are blocking it with a fixed size.

Remove

#page {
width: 960px;
}

And the responsive will start working again :P Hope this helps and remember H1's are not IMAGES! as so many people try to do, use a H1 a href with image and text for best SEO :P

Enjoy

share|improve this answer
    
+1 for "header tag should be TEXT and be readible by Google and other search engines" –  s_ha_dum Jan 7 '13 at 20:26
    
thanks! Yea I decided to add a fixed width until I figure this out. I'll try your suggestions, but that seems spot on! –  user25699 Jan 7 '13 at 21:27
    
Hmm, this doesn't seem to worker in conjuction with my header.php code, where I have for h1: <h1 class="site-title" onclick="window.location.href='ctwinvestmentgroup.org/'"; style="cursor: pointer;"></h1> This is to link the logo to the home page. –  user25699 Jan 7 '13 at 21:45
    
Remove <h1 class="site-title" onclick="window.location.href='ctwinvestmentgroup.org/'"; style="cursor: pointer;"></h1> and use mine that I listed. Basiclly onclick on the H1 tag is making that H1 clickable. I have made it so its a H1 A href link which is clickable, and cursor:pointer attribute just tells the browser its a link, again my H1 tag I listed has this so just use all my code :P –  bybe Jan 8 '13 at 18:15
    
Use the code I gave you and ignore what's there and replace it all. –  bybe Jan 8 '13 at 18:15
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.