WordPress.org

Ready to get started?Download WordPress

Forums

Header Width and Font Size (21 posts)

  1. Shindy35
    Member
    Posted 2 years ago #

    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;
    }

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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

  3. Shindy35
    Member
    Posted 2 years ago #

    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!

  4. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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!

  5. Shindy35
    Member
    Posted 2 years ago #

    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!

  6. mukesh panchal
    Member
    Posted 2 years ago #

    hi Shindy35
    what problem u face.
    name in header

  7. Shindy35
    Member
    Posted 2 years ago #

    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!

  8. mukesh panchal
    Member
    Posted 2 years ago #

    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

  9. Shindy35
    Member
    Posted 2 years ago #

    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!

  10. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Try clearing your browser cache.

  11. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  12. Shindy35
    Member
    Posted 2 years ago #

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

  13. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  14. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  15. Shindy35
    Member
    Posted 2 years ago #

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

    Have a great day!

  16. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    YAY -- just saw it change!!

  17. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    It's actually midnight here -- Santa Clara, CA -- so bed... But you have a good day -- weekend isn't it?

  18. Shindy35
    Member
    Posted 2 years ago #

    Yep! Friday night! :) Now I can transfer my domain and get the new site running! Thanks again, you're so helpful!

  19. heidhorch
    Member
    Posted 2 years ago #

    Great condo, you guys. Question: will the same fix work if you have a custom header that you want to stretch across the page? (I use a custom header instead of the site title)
    Thanks!
    http://westceltgypsy.com

  20. heidhorch
    Member
    Posted 2 years ago #

    condo - sorry (%#$& autocorrect)

    CONVO.

    thx

  21. Moyeen
    Member
    Posted 1 year ago #

    Can you change the font type ? I'd like to use Raleway for the title .

Topic Closed

This topic has been closed to new replies.

About this Topic