Header widget wrapping

[mborger]

Hello. I have a text widget in my header in bigrockinvestments.com that calls 6 social media icons across. If copy and paste the same text into a widget for honoluludreamcondo.com, the icons wrap into a 2nd line, pushing down all the content below it. What makes the content of the text widget header wrap on the one website but not on the other?

[Anita]

I used Firebug and from what I see - Honolulu has a widget width of 250px - whereas, the Hawaii one doesn't. Did you remove the 250px from the Hawaii website?

Look for this and remove the width -

#header .widget-area {

    float: right;
    padding: 25px 0 0;
    text-align: center;
    width: 250px;

}

 

---

Love coffee, chocolate and my Bella!

[mborger]

Thanks - I deleted the line and was able to get a 5th icon in the row. However when I add a 6th icon to the row, something strange happens -- the entire header gets move down about 5 lines or so, pushing down the rest of the site. Even if I duplicate an existing icon as the 6th, ex. another YouTube icon, it still happens. I can't explain it. FYI, I'm a Firebug novice :/

[Anita]

You header title area is 700px wide - you could change that to 650px and then add the width: 250px; to the #header .widget-area and it will fit. Some how your width of 250px is missing from the widget area.

---

Love coffee, chocolate and my Bella!

[mborger]

Got it - works like a charm. All I had to do was remove the 700px line -- the 250px line stays removed per your original suggestion. Thanks!

[Author]

Posts