WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Theme twenty eleven, header widths (5 posts)

  1. Neomie
    Member
    Posted 2 years ago #

    http://www.charizmatic.com/Dynamic/

    For some, this page displays properly and for others, the header and the purple bar beneath it are different lengths.

    Can you offer some advice please?

    I can't figure out where the header image width is set. Thanks a mill

    Neo

  2. ChristiNi
    Member
    Posted 2 years ago #

    Hi Neomie,

    I viewed your site using Firefox with the Firebug plugin and see the following information about your header image and navigation bar:

    This bit of code IDs the style for your banner:

    <header id="branding" role="banner">

    This code IDs the style for your navigation bar:

    <nav role="navigation" id="access">

    Now let's look in your style.css file. You should see this width for #access:

    width: 947px;

    In the same file (style.css) this is the width currently set for #branding img:

    width: 100%;

    You can either change the width for #access to 100% or you can change the width for #branding img to 947px.

    Hope this helps!

  3. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the purple bar is the problem;
    most elements in Twenty Eleven are flexible width, while the purple bar seems to be styled with s fixed width.
    rezize your browser window to see for yourself.

    remove the 'width' from this style:

    #access {
    background: #9966ff;
    display: block;
    float: left;
    margin: 0 auto;
    width: 947px;
    }

    ideally, move and merge the whole style with the original one a few lines earlier in style.css (shortend just to show it here):

    #access {
    	background: #9966ff; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	...;
    	width: 100%;
    }

    http://www.w3schools.com/css/

    btw and important:
    please don't edit Twenty Eleven directly, but create a child theme http://codex.wordpress.org/Child_Themes and make the edit in there.
    this will also help to keep your customisations safe from getting overwritten with your next upgrade.

  4. Neomie
    Member
    Posted 2 years ago #

    Thank you so much, ChristiNI and Alchymyth - this is all so helpful and I am a lot clearer now on where I go from here.

    You are both so kind to assist those of us who are just starting out

    I hope some day to be able to help others too.

    Neo

  5. Neomie
    Member
    Posted 2 years ago #

    Just popped back to say the issue is resolved and you guys are the greatest. Thanks a mill

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags