Support » Fixing WordPress » Header Width and Font Size

  • I’m using the Oxygen wordpress theme. On WordPress.com my header text went across the entire screen and was very large with a subtext line as well. Now I’ve transferred to wordpress.org and I have the text I want, but it seems to cut it off in the middle. This means that my title (Undiscovered Sunsets) is now in two lines and doesn’t look nice. I also want to increase the font size.

    Here is the CSS from my header. Is there something I can change here to fix the problem? Thank you in advance!

    #header {
    clear: both;
    width: 100%;
    float: left;
    padding: 40px 0 0 0;
    }
    #branding {
    float: left;
    width: 45%;
    overflow: hidden;
    }
    #site-title {
    font-family: ‘Abel’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    font-size: 3em; /* 36 / 12 = 3 */
    line-height: 1em;
    margin: 0 0 3px 0;
    text-transform: uppercase;
    word-wrap: break-word;
    }
    #site-title a {
    color: #222;
    border-bottom: none;
    }
    #header img { max-width: 100%; }
    #site-description {
    font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    font-size: 0.9166666666666667em; /* 11 / 12 = 0.9166666666666667 */
    font-weight: normal;
    line-height: 1.5em;
    margin-bottom: 20px;
    color: #bbb;
    float: left;
    width: 91.48936170212766%;
    clear: both;
    }
    .breadcrumbs {
    font-size: 0.9166666666666667em;
    color: #aaa;
    float: left;
    width: 94.85%;
    background: #f3f3f3;
    padding: .25em .6em .35em .9em;
    margin-bottom: 20px;
    border-left: 10px solid #e9e9e9;
    }
    .breadcrumbs a, .breadcrumbs a:visited { color: #777; }
    .breadcrumbs a:hover { color: #000; }
    #sidebar-header {
    overflow: hidden;
    float: right;
    width: 49.78723404255319%; /* 468 / 940 = 0.4978723404255319 */
    height: 60px;
    margin-bottom: 20px;
    }

Viewing 15 replies - 1 through 15 (of 20 total)
  • Someone has to be able to see your actual site to help with things like this — can you post a link?

    Also, for future posting of code see http://codex.wordpress.org/Forum_Welcome#Posting_Code

    Here is the link to my original blog on wordpress.com

    http://undiscoveredsunsets.com/

    Here is the link to my blog on wordpress.org where I’m wanting to change the Header settings.

    http://66.147.244.130/~undisco6/

    Here is the pastebin URL for my code: http://pastebin.com/stPt8J3g

    I appreciate your help!

    To change the site title font-size, change the CSS code in style.css
    line 556:

    #site-title {
        font-family: 'Abel','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 3em;
        line-height: 1em;
        margin: 0 0 3px;
        text-transform: uppercase;
        word-wrap: break-word;
    }

    Change the width in this to 100%;

    #branding {
        float: left;
        overflow: hidden;
        width: 45%;
    }

    If you want the site-description to be bigger too, do it in

    #site-description {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9166666666666667em; /* 11 / 12 = 0.9166666666666667 */
    font-weight: normal;
    line-height: 1.5em;
    margin-bottom: 20px;
    color: #bbb;
    float: left;
    width: 91.48936170212766%;
    clear: both;
    }

    Hopefully that all works…if not, post back.

    BTW, lovely site and stories!

    I changed the width to 100% and tried to put the font size in the site title to 6em just to see the difference, and unfortunately it still looks the exact same.

    Is it possible the change needs to be made elsewhere?

    The new CSS looks like this and is making no change on my site.
    http://pastebin.com/k3X7H62K

    I’m glad you enjoy the site! I’m just trying to make these last edits before transferring my domain over to wordpress.org 🙂

    Thanks again for all your help….I really appreciate it!

    hi Shindy35
    what problem u face.
    name in header

    I would like to change the width of the header, so that it goes all the way across the screen and is not cut off half-way. Also, I would like to change the size and font.

    If you look at my post above you will see a URL to the CSS of my header as well as two blog posts….one with the header across and one without. The one without is the one I’d like to change because this is my new website.

    Thank you in advance!

    if u want to change the header u have to put header code in out side the wrap class because wrap class have assign width 940px
    thats wy u not change the width of header

    mukesh27 thank you for your help. I don’t understand CSS well enough yet to have found that myself.

    I don’t understand where you sent the code. What is my sky? Where can I find it?

    Thank you very much for taking the time to help me!

    Try clearing your browser cache.

    What mukesh said is not relevant to what you want to do.

    Ok then I’m back to square one if what he says does not apply. Do you have any other ideas?

    Did you make the changes in the style.css file? It looks like there is a section of code that has to do with small devices — and that #branding section is at 100% but the regular one is not.

    The one you want to change is on line 551 for #branding
    and line 556 for #site-title.

    WPyogi I cleared my browser cache and now everything is great! Thank you so much for your help!

    Have a great day!

    YAY — just saw it change!!

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Header Width and Font Size’ is closed to new replies.