Масштабировать только одно изображение в мобильном режиме

Question

У меня недостаточно знаний html/css. У меня есть весь сайт золотой для просмотра мобильных/планшетов. У меня проблема с навигационной панелью. Когда экран уменьшен, логотип занимает всю навигационную панель, и вы не видите ссылки. Все остальные изображения отлично снижаются. Я не могу найти, где в коде, чтобы изменить это, чтобы ссылки отображались под ним или рядом с ним - на самом деле все равно. Я просто хочу, чтобы он показывал.

<div id="wrapper"> 
<div id="header-wrapper" class="container"> 
    <div id="header" class="container"> 
     <div id="logo"> 
     <a href="/index.html"><img src="images/logo.png" /></a></div> 
     <div id="menu"> 
      <ul> 
       <li><a href="/index.html" accesskey="1" `title="">Home</a>`</li> 
       <li><a href="/ourteam.html" accesskey="2" title="">Our `Team</a></li>` 
       <li><a href="/services.html" accesskey="4" `title="">Services</a></li>` 
       <li><a href="/contact.html" accesskey="3" `title="">Contact</a></li>` 
      </ul> 
     </div> 
    </div> 
    <div id="banner" class="container"><img src="images/img03.jpg" alt="" /></div> 
</div> 

Что бы я добавить к отзывчивым файл CSS, чтобы сделать это так, что Данг логотип не берет на мир?

CSS:

#wrapper 
{ 
overflow: hidden; 
padding-top: 100px; 
} 

.container 
{ 
width: 1200px; 
margin: 0px auto; 
} 

.clearfix 
{ 
clear: both; 
} 

/** HEADER */ 

#header-wrapper 
{ 
overflow: hidden; 
height: 650px; 
margin: 0px auto; 
box-shadow: 0px 0px 10px 5px rgba(0,0,0,.05); 
} 

#header 
{ 
overflow: hidden; 
height: 75px; 
background: url(images/img02.jpg) repeat-x left top; 
} 

/* Logo */ 

#logo 

{ 
float: left; 
width: 370px; 
padding: 0px 0px 0px 30px; 
text-shadow: 1px 1px 0px #814059; 
text-transform: uppercase; 
font-family: 'Open Sans Condensed', sans-serif; 
} 

#logo h1 
{ 
float: left; 
padding: 5px 10px 0px 0px; 
} 

#logo h1 a 
{ 
text-decoration: none; 
font-size: 1.5em; 
font-weight: 300; 
color: #FFFFFF; 
} 

#logo p 

{ 
display: block; 
padding: 25px 0px 0px 40px; 
letter-spacing: 1px; 
font-size: 1.2em; 
color: #E5C5C9; 
} 

#logo p a 
{ 
color: #E5C5C9; 
} 

/* Menu */ 

#menu 
{ 
float: right; 
width: 750px; 
padding: 20px 30px 0px 0px; 
} 

#menu ul 
{ 
float: right; 
margin: 0; 
padding: 0px 0px 0px 0px; 
list-style: none; 
line-height: normal; 
} 

#menu li 
{ 
float: left; 
} 

#menu a 
{ 
display: block; 
margin-left: 1px; 
padding: 7px 0px 7px 30px; 
letter-spacing: 1px; 
text-decoration: none; 
text-align: center; 
text-shadow: 1px 1px 0px #814059; 
text-transform: uppercase; 
font-family: 'Open Sans Condensed', sans-serif; 
font-size: 16px; 
font-weight: 300; 
color: #FFFFFF; 
} 

#menu a:hover, #menu .current_page_item a 
{ 
text-decoration: none; 
border-radius: 5px; 
color: #FFFFFF; 
} 

изображения рабочего стола против мобильного https://imgur.com/a/UI2bV

Answer 1

Как о запросе @media?

HTML:

<div id="wrapper"> 
     <div id="header-wrapper" class="container"> 
     <div id="header" class="container"> 
      <div id="logo"> 
      <a href="/index.html"><img id="mobilelogo" src="images/logo.png" /></a></div> 
      <div id="menu"> 
      <ul> 
       <li><a href="/index.html" accesskey="1" title="">Home</a></li> 
       <li><a href="/ourteam.html" accesskey="2" title="">Our Team</a></li> 
       <li><a href="/services.html" accesskey="4" title="">Services</a></li> 
       <li><a href="/contact.html" accesskey="3" title="">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
     <div id="banner" class="container"><img src="images/img03.jpg" alt="" /></div> 
     </div> 

CSS:

@media (max-width:600px) { // Or whatever screen width you want your breakpoint at 
     #mobilelogo { height:60px; } // Or whatever height is appropriate 
    } 

Answer 2

Может быть, вы хотите мобильный обнаружить код, если вы не используете один:

var isMobile = { 
    Android: function() { 
     return navigator.userAgent.match(/Android/i); 
    }, 
    BlackBerry: function() { 
     return navigator.userAgent.match(/BlackBerry/i); 
    }, 
    iOS: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    }, 
    Opera: function() { 
     return navigator.userAgent.match(/Opera Mini/i); 
    }, 
    Windows: function() { 
     return navigator.userAgent.match(/IEMobile/i); 
    }, 
    any: function() { 
     return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
    } 
}; 

if(isMobile.any()){ 
    // Mobile! 
} else { 
    // Not mobile 
} 

источник: A beautiful mind Вы затем может задавать размер изображения с помощью класса css после следующего кода

if(isMobile.any()){ 

} 

Это бы что-то вроде img.class или class.img {высота: 30%; ширина: 30%