Executive Pro Header Widget Too Long

Community Forums Forums Design Tips and Tricks Executive Pro Header Widget Too Long

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  lvvvvvl 5 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #113025

    lvvvvvl
    Participant
    Post count: 19

    Hello,

    I recently replaced my header menu in the Executive Theme for a widget which I created linking to my social pages that aligns beside the main logo image.

    The widget looks fine in pc screens, but when I check the website on a small screen or mobile device, the header widget jumps to the next row and goes full width of the screen which distorts the whole site and compresses the content area to one side.

    This is my header css:

    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
         margin: 0 auto;
         min-height: 100px;
         width: 100%;
    }
    
    /* Title Area
    --------------------------------------------- */
    
    .title-area {
         font-weight: 700;
         float: left;
         overflow: hidden;
         width: 320px;
    }
    
    .site-title {
         font-size: 36px;
         font-size: 3.6rem;
         line-height: 1.25;
         margin: 0 0 5px;
         margin: 0 0 0.5rem;
    }
    
    .site-title a,
    .site-title a:hover {
         color: #222;
         display: block;
         padding: 28px 0 0;
         padding: 2.8rem 0 0;
         text-decoration: none;
    }
    
    /* Full width header, no widgets */
    
    .header-full-width .title-area,
    .header-full-width .site-title {
         width: 100%;
    }
    
    .header-image .site-description,
    .header-image .site-title a {
         display: block;
         text-indent: -9999px;
    }
    
    /* Logo, hide text */
    
    .header-image .site-description,
    .header-image .site-title a {
         display: block;
         text-indent: -9999px;
    }
    
    .header-image .title-area,
    .header-image .site-title,
    .header-image .site-title a {
         float: left;
         margin: 0;
         max-width: 586px;
         min-height: 100px;
         padding: 0;
         width: 100%;
    }
    
    /* Widget Area
    --------------------------------------------- */
    
    .site-header .widget-area {
         float: right;
         width: 554px;
    }
    
    .site-header .widget {
         padding: 28px 0 0;
         padding: 2.8rem 0 0;
    }
    
    .site-header .search-form {
         float: right;
         margin-top: 24px;
         margin-top: 2.4rem;
         width: 50%;
    }
    

    And this is the additional css to customize the widget:

    .site-header #text-22 {
      padding: 16px 20px;
      background-color:#ffffff;
      width: 554px;
    }

    What have I done wrong to make the widget expand so long?

    Thank you

    http://goo.gl/v9MtXR
    #113088

    lvvvvvl
    Participant
    Post count: 19

    Does nobody know how to fix this? I think my traffic is being affected due to this problem as many visitors can’t read the content.

    #113096

    dev
    Participant
    Post count: 472

    There are a lot of points for failure here… could be the code in how you created the widget area, it could be some CSS somewhere.

    You didn’t show us the media queries. I assumed you modified those for your new widget area? If not, well that is probably your problem.

    If you don’t know how to code a media query CSS selector there are a number of people on this board you can hire to get it done for you… (but not me… I’m way too busy right now.)

    Dev

    http://www.NewMediaWebsiteDesign.com

    #113342

    lvvvvvl
    Participant
    Post count: 19

    I figured out that by making the header widget less wide and by forcing it to float auto normally and to the left when on a mobile device (using a media query) it fixed somewhat the problem.

    My only problem now is that by reducing the header widget width, I’ve created a gap between the header image and the widget, and the gap displays the background color of the website instead if just white. How do I make the whole site.header area background white by default underneath the header image and widget?

    Here’s a screenshot of what I mean: http://snag.gy/aO8T9.jpg

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

You must be logged in to reply to this topic.