Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 3 Header Widgets In Line

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 1, 2013 at 3:14 pm #151850
    braddalton
    Participant

    I’ve created 3 widgets which display inline perfectly after the header but when i change the hook to the header hook, they display vertically.

    How can i make them display in line in the header?

    Here’s the CSS which works after the header:

        .featured-one .widget { 
    float: left; padding: 0 2.8%;  
    width: 33%; 
    position: inline; 
    }

    .featured-two .widget {
    float: left;
    padding: 0 2.8%;
    width: 33%;
     }

    .featured-three .widget {
    float: left;
    padding: 0 2.8%;
    width: 33%;
      }

    .featured-widgets {
    background-color: #fff;
    clear: both;
    overflow: hidden;
    padding: 30px 1px 0;
    padding: 3rem 0.1rem 0;
   margin-bottom: 20px;
   margin-bottom: 2rem;
    }
    October 1, 2013 at 10:30 pm #151865
    Paulie_D
    Moderator

    We’d need to see it in action.

    Do you have a link or could you make a Codepen.

    October 2, 2013 at 7:40 pm #151925
    braddalton
    Participant

    Here it is on a live site http://www.solutionsocial.com/

    October 3, 2013 at 7:06 am #151952
    Paulie_D
    Moderator

    I think you need to change this:

    .site-header .widget-area {
color: #fff;
float: right;
width: 33%; <----change from 600px to this
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.