Title: Header issues
Last modified: August 31, 2016

---

# Header issues

 *  [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * (@thisguynelson)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/header-issues-25/)
 * Hello, I’m developing a theme from scratch for my own site and I’m having some
   header issues.
 * First, the header is covering the whole space which I want but once it gets smaller
   part of the image I need is cut out. Is there a way to set a media query where
   a different image (a cropped version) will appear on smaller screens?
 * Second, on the home page, there is a perfect amount of space/padding between .
   site-description and the divs above. However, when I switch to a different page,
   the spacing gets wider. Why is the spacing changing on different pages?
 *     ```
       /*--------------------------------------------------------------
       # Header
       --------------------------------------------------------------*/
   
       .site-header {
           background-color: #fff;
           background-size: cover;
       }
       .site-branding {
           text-align: left;
           margin-top: 1em;
           padding-bottom: 4em;
       }
       .site-title {
           margin-left: 2em;
           font-family: 'Raleway', sans-serif;
           font-size: 2.4em;
           font-weight: 300;
           line-height: 1.3em;
           color: #fff;
           text-transform: uppercase;
           word-break: break-word;
           letter-spacing: 2px;
           padding-top: 2em;
       }
       .site-description {
           padding-top: 1em;
           font-family: 'Merriweather', serif;
           margin-left: 9.5em;
           font-size: 100%;
           color: #fff;
           font-weight: 300;
           letter-spacing: 1px;
           font-style: italic;
       }
       @media screen and (max-width: 50em)
       {
           .site-title {
               font-size: 1.2em;
               margin-left: 1em;
   
           }
           .site-description {
               font-size: .6em;
               margin-left: 3em;
           }
   
       }
   
       .site-title a {
           text-decoration: none;
           color: inherit;
       }
   
       .site-title a:hover,
       .site-title a:focus {
           text-decoration: none;
       }
   
       .site-title::after {
       	display: block;
       	content: "";
       	margin-top: .7em;
               margin-left: 3.5em;
       	width: 5em;
       	border-bottom: solid 1px #fff;
       	opacity: .75;
       }
       ```
   
 * This is my code.
 * Thank you!

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

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 1 month ago](https://wordpress.org/support/topic/header-issues-25/#post-7136009)
 * You’ll need to show us a Webpage with the problem
 *  Thread Starter [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * (@thisguynelson)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/header-issues-25/#post-7136017)
 * The web page is currently being locally hosted.. Not sure how I could show a 
   web page.
 * Is there a way to simply make a different header on different screens?

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

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

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [margin](https://wordpress.org/support/topic-tag/margin/)
 * [padding](https://wordpress.org/support/topic-tag/padding/)
 * [re-size](https://wordpress.org/support/topic-tag/re-size/)
 * [spacing](https://wordpress.org/support/topic-tag/spacing/)

 * 2 replies
 * 2 participants
 * Last reply from: [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/header-issues-25/#post-7136017)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics