title: My Website Header Image Is Not Resizing On Mobile
body: <p>I am using blogger and has a custom template I added a header it works fine but the header is not resizing on mobile template 
  My site is <a href="https://untoldstoriesofpakistan.blogspot.com" rel="nofollow noreferrer">https://untoldstoriesofpakistan.blogspot.com</a></p>
  
  <p>I think this is my css for header </p>
  
  <p><strong>Header</strong></p>
  
  <pre><code>div#navigation-wrapper {
  width: 56%;
  float: right;
  }
  #header {
  width: 30%;
  background-size: contain;
  }
  #logo {
  text-align:center;
  padding:0px 0;
  height: 10px;
   background-size: contain;
  }
  </code></pre>
  
  <p><strong>and this is my media css</strong></p>
  
  <pre><code>@media only screen and (max-width: 767px) {
  
      .container {
          width:300px;
      }
  
      #navigation-wrapper {
          display:none;
      }
  
      .slicknav_menu {
          display:block;
      }
  
      #logo img {
          max-width:300px;
          height:auto;
      }
  
      .post-header h1 a, .post-header h2 a, .post-header h1 {
          font-size:22px;
          letter-spacing:2px;
      }
  
      .post-image img {
          width:300px;
          height:auto;
      }
  
      .post-image.audio iframe {
          width:300px;
          height:auto;
      }
  
      .item-related {
          width:320px;
          margin-bottom:30px;
      }
  
      .share-box {
          width:46px; 
          height:36px; 
          line-height:36px;
          margin:0 4px;
      }
  
      .post-pagination .prev-post {
          width:300px;
      }
      .post-pagination .next-post {
          width:300px;
      }
  
      #respond textarea {
          width:90%;
      }
  
      .thecomment .author-img {
          display:none;
      }
  
      #widget-area .widget, #sidebar .widget {
          width:300px;
          margin-right:32px;
          float:left;
          margin-bottom:35px;
      }
  
      #footer-logo img {
          max-width:300px;
          height:auto;
      }
  
      #footer-social a i {
          height:28px;
          width:28px;
          line-height:28px;
          margin-right:0;
          font-size:12px;
      }
      #footer-social a {
          margin:0 5px;
      }
      #footer-social a span{
          display:none;
      }
  
      .wpcf7 textarea {
          width:94%;
      }
  
      .sp-grid li {
          width:320px;
      }
      .sp-grid li:nth-child(3n+3) {
          margin-right:0;
      }
      .sp-grid li:nth-child(2n+2) {
          margin-right:0;
      }
  
      .container.sp_sidebar #main {
          width:300px;
          margin-right:0;
      }
      .container.sp_sidebar #sidebar {
          width:300px;
      }
  
          .container.sp_sidebar #sidebar .widget {
              width:300px;
          }
  
      .container.sp_sidebar .item-related {
          width:300px;
          margin-bottom:30px;
      }
  
  
      .col-md-6.site-top-menu-right.text-right {
      display: none;
      }
  
  
  
  
  
      div#sidebar-narrow {
      display: none;
      }
  
      div#main-part {
      float: left;
      width: 310px;
      }
  
      }
  </code></pre>