Title: Make header image responsive
Last modified: August 24, 2016

---

# Make header image responsive

 *  Resolved [JimLS](https://wordpress.org/support/users/jimls/)
 * (@jimls)
 * [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/)
 * Have a site that someone else set up and added a header image to. But it is fixed
   size and doesn’t scale with display size. Wanting to add the CSS to make that
   work. I have changed several pixel sizes to percent but can’t get the size to
   change. The child theme style.css contains:
 *     ```
       #header {
         width: 960px;
         margin: 10px auto;
         position: relative;
         text-align: center;
       }
   
       #header #header-logo {
         border: 10px solid #D2B48C;
   
       }
       ```
   
 * header.php contains:
 *     ```
       <div id="wrap-all">
               <header id="header">
               <img id="header-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/gutter-gardens-logo_r.jpg" alt="Gutter Gardens">
             </header>
       ```
   
 * The site is here:
    [guttergardens.com](http://guttergardens.com)

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

 *  [Anwer AR](https://wordpress.org/support/users/aranwer104/)
 * (@aranwer104)
 * [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/#post-5970630)
 * You are using px to define header width & it will output fixed 960px width on
   all devices without caring of their screen resolutions.
    so to fix this issue,
   i will suggest you to use CSS Media queries for different resolutions. like
 *     ```
       @media only screen and (max-width : 1200px){
         #header {width : 1100px;}
       }
       @media only screen and (max-width : 979px){
        #header {width : 960px;}
       }
       ```
   
 * here is an info about CSS3 Media quries and you can use them to control your 
   header width on all devices.
    [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/#post-5970640)
 * Actually, you don’t need a media query to make it responsive. Make the following
   change to this existing CSS rule by adding the **width** and **box-sizing** properties:
 *     ```
       #header #header-logo {
         border: 10px solid #D2B48C;
         width: 100%;
         box-sizing: border-box;
       }
       ```
   
 *  [Anwer AR](https://wordpress.org/support/users/aranwer104/)
 * (@aranwer104)
 * [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/#post-5970752)
 * Thanks CrouchingBruin. this was very helpful. i can use it in future.
 *  Thread Starter [JimLS](https://wordpress.org/support/users/jimls/)
 * (@jimls)
 * [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/#post-5970787)
 * CrouchingBruin, I applied your suggestion and it worked well. I also wanted to
   scale the border. Since borders can’t be defined in percent I used padding instead:
 *     ```
       #header #header-logo {
         width: 98%;
         padding: 1%;
         background: #D2B48C;
       }
       ```
   

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

The topic ‘Make header image responsive’ is closed to new replies.

 * 4 replies
 * 3 participants
 * Last reply from: [JimLS](https://wordpress.org/support/users/jimls/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/make-header-image-responsive-3/#post-5970787)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics