Title: Different headers for different screen sizes
Last modified: August 22, 2016

---

# Different headers for different screen sizes

 *  [anx](https://wordpress.org/support/users/anx/)
 * (@anx)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/different-headers-for-different-screen-sizes/)
 * I am using the theme twenty thirteen version 1.4 with WP 4.1.1
    I have a header
   image that works fine for bigger screens. However, on smaller screens the resized
   image does not work with the header text. I have tried to make customized images,
   name them the same as the auto-generated images and upload to the same file via
   FTP but nothing changes on front-end. Any ideas how to do this (using a child
   theme of course)?

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

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/different-headers-for-different-screen-sizes/#post-5820367)
 * Can you please post a link to your site? Offhand, I think the best way to do 
   this would be to add a [media query](http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html)
   that changes the header image to your modified image at mobile screen widths.
   For example:
 *     ```
       @media only screen and (max-width: 767px) {
          .header-main {
             background-image: url(/images/new_header.jpg);
          }
       }
       ```
   
 * This would change the background image when the screen width goes under 767px,
   which is the width of an iPad.
 *  [liledit7](https://wordpress.org/support/users/liledit7/)
 * (@liledit7)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/different-headers-for-different-screen-sizes/#post-5820491)
 * Where exactly would I insert the above snippet?
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/different-headers-for-different-screen-sizes/#post-5820492)
 * Either create a [child theme](http://codex.wordpress.org/Child_Themes) and add
   it to the end of your child theme’s style.css file, or use a CSS plugin like 
   Jetpack or [Custom CSS Manager](http://wordpress.org/plugins/custom-css-manager-plugin/).
   The plugin is the easier route. And you want to use the **.side-header** class
   for the selector, not **.header-main** if you’re using the Twenty Thirteen theme.
   I just used **.header-main** as a general example in the post above.

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

The topic ‘Different headers for different screen sizes’ is closed to new replies.

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

## Tags

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

 * 3 replies
 * 3 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/different-headers-for-different-screen-sizes/#post-5820492)
 * Status: not resolved