How to change the Header Size Image in WIRE

Home Forums Automattic Wire How to change the Header Size Image in WIRE

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #108832 Resolve

    fearnopunch

    Im trying to change the header size image in the theme Wire and when dont understand what I should put exactly in the css space.

    someone said to put .site – branding but I dont get it.

    Please help , what do i put in the CSS to change the size of the Header image, ? Thank you

    The blog I need help with is itrekwear.com
    #141808

    Kathryn P.
    Happiness Engineer

    Hi there, are you trying to change the height of the header image strip?

    The class that’s used on the header background image is this one:

    .site-branding

    If you’d like to increase the height, try something like this in your CSS:

    .site-branding {
    height: 460px;
    }

    Let me know how it goes.

    #141844

    fearnopunch

    what does the .site-branding mean. how exactly should i write it.

    Thank you so much, just want to get this done to get started.

    #141866

    Kathryn P.
    Happiness Engineer

    Hi there, site-branding is the name of the HTML element in which your header image is contained.

    You would write the CSS exactly as I showed you above:

    .site-branding {
    height: 460px;
    }

    Paste these lines of code in your custom CSS editor under Customize > CSS. This will make your header image 460px high, but you can adjust that number as you like.

    If you’re interested in learning more about how to find CSS selectors in your code, this is a very good post to check out.

    #141892

    fearnopunch

    so it would be itrekwear.com is that my site branding.

    #141895

    Kathryn P.
    Happiness Engineer

    This is your site-branding HTML element, which you can see if you view your browser source:

    <div class="site-branding">
    <div class="logo">
    <h1 class="site-title"><a href="http://itrekwear.com/" title="=" rel="home">=</a></h1>
    <h2 class="site-description"></h2>
    </div><!-- .logo -->
    </div><!-- .site-branding -->

    Does this answer your question? I’m not 100% sure what you’re asking. :-)

    #142180

    Kathryn P.
    Happiness Engineer

    Just let me know if you still need any help with this or if you’re all set. Thanks!

    #142197

    fearnopunch

    I got it to work but now it wont work with the mobile phone, wont resize, any help their thank you

    #142208

    Kathryn P.
    Happiness Engineer

    You might want to try applying the custom CSS I provided earlier only to larger screens. Could you try replacing the earlier code with this and let me know if it helps:

    /* Desktops and laptops
    
    */
    @media only screen
    and (min-width : 1224px) {
    .site-branding {
    height: 740px;
    }
    }

    #142669

    Kathryn P.
    Happiness Engineer

    Hi there, did you still need any help with this? It looks like you left the original code in addition to adding the new bit, so things look a little off – you’ll want to actually replace the old code with the new piece.

    Your CSS customizations currently look like:

    /* Desktops and laptops
    
    */
    @media only screen
    and (min-width : 1424px) {
    .site-branding {
    height: 840px;
    }
    }

    }

    .site-branding {
    height: 740px;
    }

    You want to keep just the first part so the .site-branding class doesn’t become twice as high as it should be:

    /* Desktops and laptops
    
    */
    @media only screen
    and (min-width : 1424px) {
    .site-branding {
    height: 840px;
    }
    }

    }

    Let me know how it goes.

    #144104

    Kathryn P.
    Happiness Engineer

    Hi there, just checking in to see whether you still needed any help with this issue or if you’re all set. Thanks!

    #144374

    Kathryn P.
    Happiness Engineer

    Hi there, I’m going to close this thread since it’s been a while since we heard from you, but feel free to start a new one if you need further help. Thanks!

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘How to change the Header Size Image in WIRE’ is closed to new replies.