WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Twelve] How to make logo scalable? (20 posts)

  1. lak3000
    Member
    Posted 1 year ago #

    I'm using the Twenty Twelve theme, and I've added a logo to the top of my page by replacing <h1> in header.php with this:

    <h1><a class="customlogo" href="http://www.rebeccamross.com/" title="Return Home">Rebecca M. Ross<a></h1>

    then i added this CSS to my stylesheet:

    .customlogo {
        background: url("http://www.rebeccamross.com/wp-content/uploads/2013/02/header_v11.jpg") no-repeat scroll 0 0 transparent;
        height: 100%;
        width: 100%;
        text-indent: -9999em;
        display: block;}

    so far, so good. but now i'd like to make the logo scalable as the browser window size changes. so i added this to my stylesheet:

    @media (max-width: 600px){
    .customlogo {
        height: 25%;
        width: 25%; }
    }
    
    @media (max-width: 960px){
    .customlogo {
        height: 75%;
        width: 75%; }
    }

    What happens is that the "container" (or whatever you call it) for the image appears to change size, but the image itself does not. that is, the image stays the same size, but it is cropped differently (without resizing) as the browser window changes size.

    How can I get the image itself to change size?

    Many thanks!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

  3. lak3000
    Member
    Posted 1 year ago #

    I forgot to mention that i did create a child theme and all edits were made to the child theme.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    Fairy 'nuff. :-) On the face of it, what you're doing already seems correct but it's hard to say for sure without actually seeing the site. CSS quoted outside of the context of its site tends to be just too abstract.

  5. lak3000
    Member
    Posted 1 year ago #

    the site is http://www.rebeccamross.com. any suggestions?

  6. lak3000
    Member
    Posted 1 year ago #

    forget the code above ... i found a simpler way to replace the site title with a logo. i added this code to header.php:

    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="http://www.rebeccamross.com/wp-content/uploads/2013/02/header_v11.jpg" alt="" /></a></span></h1>

    however, the logo still isn't resizing as the browser window resizes.

    any ideas?

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Just add this (without any media queries);

    #site-logo {
     max-width: 100%;
    }
  8. lak3000
    Member
    Posted 1 year ago #

    thanks for your response, andrew!

    i just added your code to my style.css but the logo still isn't resizing ...

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you cleared your browser cache?

  10. lak3000
    Member
    Posted 1 year ago #

    ha ha. no, i hadn't. just did and it works. thank you!

  11. lak3000
    Member
    Posted 1 year ago #

    hello again ... actually i just noticed that the logo scales in safari and chrome, but does not in firefox. does anyone know how to make it scale in all 3 browsers?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Coming soon site again

  13. lak3000
    Member
    Posted 1 year ago #

    try it now.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Add;

    #site-title a {
     display: block;
    }

    Edit: Thanks Alchymyth, I copied the wrong selectors.

  15. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    add:

    #site-title a { width: 100%; }
  16. lak3000
    Member
    Posted 1 year ago #

    thanks, guys. andrew -- your code did not work, for some reason, but alchymyth's did.

  17. samantha1717
    Member
    Posted 1 year ago #

    Hi-
    Where exactly does
    one pla
    ce the CSS code

    #site-title a { width: 100%; }

    to make the new logo scalable? I've tried everywhere is my twenty twelve child css.style folder.

    Thanks!

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Download and install this Custom CSS Manager plugin and enter your CSS in its allocated section of the dashboard.

  19. samantha1717
    Member
    Posted 1 year ago #

    I used the css editor in jetpack. Did not work.

    http://www.sourlandcandy.com/install

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay, first remove all HTML you have in your style.css file of your Child Theme.

    Then try adding;

    #site-logo {
     max-width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic