Title: Header layout
Last modified: March 30, 2019

---

# Header layout

 *  [mpbaweb](https://wordpress.org/support/users/mpbaweb/)
 * (@mpbaweb)
 * [7 years ago](https://wordpress.org/support/topic/header-layout-4/)
 * Hi
    I am very happy with the layout in mobile/tablet view, but the desktop view
   could do with a bit of css trickery to improve alignment and eliminate unnecessary
   white space. I have attached a link to an example of what I would like to do.
   Top image is how it currently is, bottom image is desired layout. Hoping you 
   can help with some/all of this. I don’t want to touch the mobile/tablet view 
   at all.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-layout-4%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Jarret](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [7 years ago](https://wordpress.org/support/topic/header-layout-4/#post-11377264)
 * This should get you somewhere close I believe, you can add it to Appearance->
   Customize->Additional CSS
 *     ```
       @media only screen and (min-width: 960px) {
            #header-wrap #header {
                padding-top: .5em;
                padding-bottom: .5em;
            }
       }
       @media only screen and (min-width: 960px) {
           #header #logo .site-description {
               float: none;
               margin-left: 97px;
               margin-top: -47px;
               padding-bottom: 15px;
           }
       }
   
       @media only screen and (min-width: 960px) {
            #header #header-content {
                margin-top: 22px;
                float: right;
                display: inline-block;
           }
       }
       ```
   
 * Should only apply to anything above 960px browser width so shouldn’t touch the
   mobile settings from my limited testing.
 *  Thread Starter [mpbaweb](https://wordpress.org/support/users/mpbaweb/)
 * (@mpbaweb)
 * [7 years ago](https://wordpress.org/support/topic/header-layout-4/#post-11380450)
 * Thanks, that’s close, but it removes the tagline
 *  [Jarret](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [7 years ago](https://wordpress.org/support/topic/header-layout-4/#post-11381255)
 * Hmm, do you have a screenshot of what it looked like? I had tested out that code
   on the domain in your profile
 * [https://www.mpba.org.uk/](https://www.mpba.org.uk/)
 * It appeared to work correctly but I was using Chrome, were you using a different
   browser? Some browsers display a bit differently so it may need a bit of tweaking
   to get just right across them all.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header layout’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/smartline-lite/1.6.8/screenshot.
   png)
 * Smartline Lite
 * [Support Threads](https://wordpress.org/support/theme/smartline-lite/)
 * [Active Topics](https://wordpress.org/support/theme/smartline-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/smartline-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/smartline-lite/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * 3 replies
 * 2 participants
 * Last reply from: [Jarret](https://wordpress.org/support/users/jarretc/)
 * Last activity: [7 years ago](https://wordpress.org/support/topic/header-layout-4/#post-11381255)
 * Status: not resolved