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
  • #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;
        }
    
    #151865
    Paulie_D
    Moderator

    We’d need to see it in action.

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

    #151925
    braddalton
    Participant

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

    #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
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.