Title: Header height
Last modified: September 1, 2016

---

# Header height

 *  [pejo76](https://wordpress.org/support/users/pejo76/)
 * (@pejo76)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/header-height-23/)
 * Is there a way to reduce the entire header height? Currently, it’s occupying 
   <50% of the screen….

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

 *  Thread Starter [pejo76](https://wordpress.org/support/users/pejo76/)
 * (@pejo76)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/header-height-23/#post-7700304)
 * [http://www.butfly.se](http://www.butfly.se)
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/header-height-23/#post-7700393)
 * Hi [@pejo76](https://wordpress.org/support/users/pejo76/),
 * You could reduce the height of the header with some custom CSS.
 * To add custom CSS: Firstly [set up a child theme](https://codex.wordpress.org/Child_Themes)
   or [activate a custom CSS plugin](https://wordpress.org/plugins/search.php?q=custom+css).(
   If you have [Jetpack](https://jetpack.com) installed then you can activate [its custom CSS module](https://jetpack.com/support/custom-css/).)
 * Enter the following snippet in either the editor for your CSS plugin or the style.
   css file of your child theme:
 *     ```
       @media only screen and (max-width: 1600px) {
           .site-banner-media {
               padding-bottom: 40%;
           }
   
           .home .content-area, .blog .content-area {
               margin-top: 40%;
           }
       }
       ```
   
 * Increase/decrease the value of **padding-bottom** and **margin-top** by the same
   amount and to your liking.
 * Let me know how you get on with that! I’ll be happy to help if any extra questions
   come up, too.
 *  Thread Starter [pejo76](https://wordpress.org/support/users/pejo76/)
 * (@pejo76)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/header-height-23/#post-7700396)
 * Lovely!!! Thank you very much!!!
 * Haven’t found anything about the ability to control the number of boxes below
   the header and realize it’s depending on the width of the screen.
 * If not possible allready, might be a nice feature to be able to choose for ex
   4 columns with smaller image/text.
 * Thank you for your prompt response!
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/header-height-23/#post-7700414)
 * You could change the width of each post to 25% in order to change the number 
   of columns to four (the width is currently set to 50%):
 *     ```
       @media only screen and (min-width: 1200px) {
       	.posts .hentry {
       		width: 25%;
       	}
       }
       ```
   
 * You’ll notice, with the above custom CSS, that the default way the images are
   switched around doesn’t fit in well with four columns. You can fix this and get
   all of the images to display on the same side with the following:
 *     ```
       @media only screen and (min-width: 1200px) {
       	.posts .hentry:nth-of-type(4n+3) .entry-media, .posts .hentry:nth-of-type(4n+4) .entry-media {
       		float: left;
       	}
   
       	.posts .hentry:nth-of-type(4n+3) .entry-inner, .posts .hentry:nth-of-type(4n+4) .entry-inner, .posts .hentry:nth-of-type(4n+3) .edit-link, .posts .hentry:nth-of-type(4n+4) .edit-link {
       		right: 0;
       		left: auto;
       	}
   
       	.posts .hentry:nth-of-type(4n+3).has-post-thumbnail .entry-inner:after, .posts .hentry:nth-of-type(4n+4).has-post-thumbnail .entry-inner:after, .posts .hentry:nth-of-type(4n+3).has-post-thumbnail .entry-inner:before, .posts .hentry:nth-of-type(4n+4).has-post-thumbnail .entry-inner:before {
       		right: auto;
       		margin-right: 0;
       		margin-left: -25px;
       		left: 0;
       	}
       }
       ```
   
 * Let me know how you get on with the above.
 *  [surf4444](https://wordpress.org/support/users/surf4444/)
 * (@surf4444)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/header-height-23/#post-8369087)
 * Hi there, in reply to reducing the height of the header with some custom CSS.
   I am new to wordpress and css. If i have jetpack installed, what steps do I need
   to take to reduce the header slider to 40% of what it is now?
 * Thanks!

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

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/dyad/1.0.10/screenshot.png)
 * Dyad
 * [Support Threads](https://wordpress.org/support/theme/dyad/)
 * [Active Topics](https://wordpress.org/support/theme/dyad/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/dyad/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/dyad/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [surf4444](https://wordpress.org/support/users/surf4444/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/header-height-23/#post-8369087)
 * Status: not resolved