Header widget wrapping

Community Forums Forums Design Tips and Tricks Header widget wrapping

This topic is: not resolved

Tagged: 

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

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

    mborger
    Participant
    Post count: 108

    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?

    #3280

    Anita
    Participant
    Post count: 7578

    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;

    }

     


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #3532

    mborger
    Participant
    Post count: 108

    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 :/

    #3563

    Anita
    Participant
    Post count: 7578

    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.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #3685

    mborger
    Participant
    Post count: 108

    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!

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

You must be logged in to reply to this topic.