title: Responsive Design: Header Picture
body: <p>I got to fix the design of the website yesterday, but know dont look good at all on the phone.</p>
  
  <p>Website: www.globaltcompany.com</p>
  
  <p>Im trying to make the header responsive but im not getting true.</p>
  
  <p>Index head code</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;!--&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;!--&lt;link rel="icon" type="image/png" href="../img/GTC.png" /&gt; --&gt;
    &lt;link rel="icon" type="image/png" href="/img/Logo_PageIcon.png" /&gt;
    &lt;title&gt;Global Trade Company Ltd&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons"&gt;
    &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" href="css/style_index.css"&gt;
    &lt;link rel="stylesheet" href="css/style_menu.css"&gt;
    &lt;link href="js/flexisel/css/style.css" rel="stylesheet" type="text/css" /&gt;
          &lt;div id="fb-root"&gt;&lt;/div&gt;
          &lt;script&gt;(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&amp;version=v2.7";
              fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/script_general.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/flexisel/js/jquery.flexisel.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(window).load(function(){
        $(".carga-modal").fadeOut('slow');
        $('body').css('overflow', 'scroll');
      });
    &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Style_menu cc</p>
  
  <pre><code>.contenedor-noticia{
    position: relative;
    margin-top: 0;
    display: block;
    max-width: 100%;
    height: 120px;
    background-size: 100% 100%;
    background: url(../img/portada_index1.jpg) no-repeat center bottom;
    overflow: hidden;
    background-color: #000;}
  </code></pre>
  
  <p>style_menu ccs @ll media code</p>
  
  <pre><code>@media screen and (max-width:945px) {
    .contenedor-noticias{
    width:945px;
    img{
    width: 100%;
    max-width: 945px;
    }
    .title-menu-bar{
      display: none;
    }
  }
  @media screen and (max-width:815px) {
    .contenedor-noticias{
    width:815px;
    img{
    width: 100%;
    max-width: 815px;
    }
    }
    .navegacion{
      width: 630px;
      margin-right: 40px;
    }
    .link-menu{
      display: block;
      padding: 10px;
      padding-top: 15px;
    }
  }
  @media screen and (max-width:800px) {
    .contenedor-noticias{
    width:800px;
      img{
    width: 100%;
    max-width: 800px;
    }
    }
     .btn-menu {
      display:block;
      color:#fff;
      text-decoration:none;
      font-weight: bold;
      font-size:25px;
      float: right;
      padding: 14px;
    }
    .icon-menu{
      color: #fff;
    }
    .main{
      top: 10px;
    }
    .navegacion{
      display: none;
    }
  
    .navegacion-drawer{
      display: block;
          width:100%;
          height:100%;
          left:-100%;
          position: fixed;
      padding: 0;
      top: 58px;
  
      background-color: rgba(15, 15, 15, 0.7);
  
      }
    .link-sub-menu-drawer{
      background: rgb(34, 34, 34)
    }
    .menu-general{
      width: 80%;
      height: 100%;
      position: absolute;
      background: rgb(14, 14, 14);
      left: 0;
      overflow-y: scroll;
    }
    .menu{
    display:block;
    float:none;
    border-bottom:1px solid rgba(255,255,255, .3);
    display: block;
    width: 100%;
  
  }
  .link-menu{
    text-align: left;
  
  }
  
  .sub-menu-drawer{
    position: relative;
    padding: 0;
    width: 100%;
    top: 100%;
    left: 0;
    display: none;
    list-style: none;
  
  }
  .item-submenu-drawer{
    padding: 3px;
    background: rgb(23, 23, 23);
  }
  .link-sub-menu-drawer{
      height: 37px;
  }
  
  .menu:before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: rgb(73, 186, 222);
    visibility: hidden;
  }
  .menu:hover:before{
    content: "";
    width: 0;
    left: 0;
  }
  .title-menu-bar{
    display: block;
  }
  .text-footer{
    font-size: 14px;
  }
  .text-info-footer{
    font-size: 11px;
  }
  
  }
  
  @media screen and (max-width:480px) {
    .contenedor-noticias{
    width:480px;
    img{
    width: 100%;
    max-width: 480px;
    }
    }
    .text-footer{
      font-size: 11px;
    }
    .text-info-footer{
      font-size: 9px;
    }
  }
  </code></pre>
  
  <p>When i access by a phone, the header picture, the picture dont looks like supose to, and i have a next problem on the page of "catalogo" for some reason the menu, is on top and not on the neat before the footer.</p>
  
  <p>Any other sugestions will be appreciated :D</p>