Executive 2.0 – Header/Site Name Clipping

Community Forums Forums Design Tips and Tricks Executive 2.0 – Header/Site Name Clipping

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  AHereld 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #53860

    AHereld
    Participant
    Post count: 20

    Hi there!

    I recently installed Genesis w/ Executive 2.0 on my site (http://www.anthonyhereld.com) and my site name does not fit!

    I’m not really looking to upload a logo, the default text is just fine…but the width is off. It’s only showing:
    anthonyhereld.

    …even on mobile. Where can I increase width? Former Thesis user here, so I don’t want to break anything while I’m still learning my way around.

    http://www.anthonyhereld.com
    #53866

    nutsandbolts
    Moderator
    Post count: 3128

    Hi Anthony,

    Open style.css in Appearance > Editor and look for the following:

    #title-area {
    float: left;
    overflow: hidden;
    width: 25%;
    }

    Change it to this:

    #title-area {
    float: left;
    overflow: hidden;
    width: 33%;
    }

    Then find this:

    #header .widget-area {
    float: right;
    width: 75%;
    }

    And change it to this:

    #header .widget-area {
    float: right;
    width: 67%;
    }

    That will adjust the width of the title area to make it big enough for the entire title, and make the header right widget area a little smaller so it doesn’t get pushed down underneath. That will allow it to resize properly for tablets and phones as well.

    Hope that helps!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #53871

    AHereld
    Participant
    Post count: 20

    BAM!

    Thanks a bunch :)

    This mobile responsive stuff is all new to me, so I figured it was % based instead of pixel, and I didn’t want to screw something up. Looks great, thank you again!

    #53984

    AHereld
    Participant
    Post count: 20

    Well…apparently this isn’t resolved.

    I’ve been testing on Android devices (Samsung Galaxy III phone and Galaxy Note tablet) and this workaround looks just fine. It also looks fine on the iPad. For iPhone users though, my friends are telling me the site name is too wide and not aligning properly.

    Can I revert this and just shrink the font size? Or maybe I should just go with an image logo after all.

    #53990

    AHereld
    Participant
    Post count: 20

    Reduced header font size from 36 to 28.

    Returned title-area and widget-area to their default values.

    Fixed.

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

You must be logged in to reply to this topic.