Make header image responsive

  • Resolved JimLS

    (@jimls)


    9 years, 11 months ago

    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

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

  • 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

    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;
}

    Thanks CrouchingBruin. this was very helpful. i can use it in future.

    Thread Starter JimLS

    (@jimls)

    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.