Как я могу сделать эти вкладки Отзывчивый

Question

Когда я открываю сайт на мобильном телефоне, то последняя вкладка объединяется с другими вкладками, а последняя вкладка будет иметь строку. Но я не эксперт в медиа-запросе в CSS3. Как применить этот код, если есть какой-то другой способ, то я даю ваше лучшее решение в отношении моей проблемы. Я не хочу использовать Bootstrap, потому что мой сайт состоит из пользовательского проектирования в html и css.

document.getElementById('content_4').style.display = 'none'; 
 
    function tabSwitch(new_tab, new_content) { 
 
     
 
    document.getElementById('content_1').style.display = 'none'; 
 
    document.getElementById('content_2').style.display = 'none'; 
 
    document.getElementById('content_3').style.display = 'none'; 
 
    document.getElementById('content_4').style.display = 'none';   
 
    document.getElementById(new_content).style.display = 'block'; 
 
     
 
    
 
    document.getElementById('tab_1').className = ''; 
 
    document.getElementById('tab_2').className = ''; 
 
    document.getElementById('tab_3').className = ''; 
 
    document.getElementById('tab_4').className = '';   
 
    document.getElementById(new_tab).className = 'activy';  
 
    
 
} 
 
function tabSwitch_2(activy, number, tab_prefix, content_prefix) { 
 
     
 
    for (var i=1; i < number+1; i++) { 
 
     document.getElementById(content_prefix+i).style.display = 'none'; 
 
     document.getElementById(tab_prefix+i).className = ''; 
 
    } 
 
    document.getElementById(content_prefix+activy).style.display = 'block'; 
 
    document.getElementById(tab_prefix+activy).className = 'activy';  
 
     
 
}

 #tabbed_box { 
 
    margin: 0px auto 0px auto; 
 
    width:300px; 
 
} 
 
.tabbed_box h4 { 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    font-size:23px; 
 
    color:#ffffff; 
 
    letter-spacing:-1px; 
 
    margin-bottom:10px; 
 
} 
 
.tabbed_box h4 small { 
 
    color:#e3e9ec; 
 
    font-weight:normal; 
 
    font-size:9px; 
 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
 
    text-transform:uppercase; 
 
    position:relative; 
 
    top:-4px; 
 
    left:6px; 
 
    letter-spacing:0px; 
 
} 
 

 
ul.tabs { 
 
    margin:0px; padding:0px; 
 
    text-align: center; 
 
} 
 
ul.tabs li { 
 
    list-style:none; 
 
    display:inline; 
 
} 
 
ul.tabs li a { 
 
    background-color:#F7F7F7; 
 
    color:black; 
 
    padding:8px 14px 8px 14px; 
 
    text-decoration:none; 
 
    font-size:13px; 
 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    border:1px solid #F4FBFF; 
 
    border-radius: 2px; 
 
    -webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ 
 
    -moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */ 
 
    box-shadow:   1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ 
 
} 
 
ul.tabs li a:hover { 
 
    background-color:#3498DB; 
 
    color:#fff; 
 
    border-color:#3498DB; 
 
    -webkit-box-shadow: 0 8px 6px -6px black; 
 
    -moz-box-shadow: 0 8px 6px -6px black; 
 
      box-shadow: 0 8px 6px -6px black; 
 
} 
 
ul.tabs li a.activy { 
 
    background-color:#3498DB; 
 
    color:#fff; 
 
    border:1px solid #3498DB; 
 
    
 

 
} 
 
.content { 
 
    background-color:#fff; 
 
    padding:10px; 
 

 
    
 
} 
 

 
#content_2, #content_3 { display:none; } 
 
ul.tabs { 
 
    margin:0px; padding:0px; 
 
    margin-top:5px; 
 
    margin-bottom:6px; 
 
} 
 
.content ul { 
 
    margin:0px; 
 
    padding:0px 20px 0px 20px; 
 
} 
 
.content ul li { 
 
    list-style:none; 
 
    
 
    padding-top:15px; 
 
    padding-bottom:15px; 
 
    font-size:13px; 
 
} 
 
.content ul li a { 
 
    text-decoration:none; 
 
    color:#3e4346; 
 
} 
 
.content ul li a small { 
 
    color:#8b959c; 
 
    font-size:9px; 
 
    text-transform:uppercase; 
 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
 
    position:relative; 
 
    left:4px; 
 
    top:0px; 
 
} 
 
.content ul li:last-child { 
 
    border-bottom:none; 
 
} 
 
ul.tabs li a { 
 
    background-image:url(images/tab_off.jpg); 
 
    background-repeat:repeat-x; 
 
    background-position:bottom; 
 
} 
 

 

 
 
    
 
    
 
<div id="tabbed_box_1" class="tabbed_box"> 
 
    
 
    <div class="tabbed_area"> 
 
    <br> 
 
     
 
      <ul class="tabs"> 
 
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="activy">Text</a></li> 
 
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Email</a></li> 
 
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Facebook</a></li> 
 
    <li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">Social Media</a></li> 
 
</ul> 
 
     
 
      
 
     <div id="content_1" class="content"> 
 
      <img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; "> 
 
      <p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p> 
 
     </div> 
 
     <div id="content_2" class="content greybg"> 
 
      <img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;"> 
 
      <p style="float:left; text-align:center; font-style:italic;"> 
 
      <p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p> 
 
      <p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p> 
 
      </p> 
 
     </div> 
 
     <div id="content_3" class="content"> 
 
      <img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;"> 
 
      <p style="float:left; text-align:center; font-style:italic; padding-left:5px;"> 
 
      <p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p> 
 
      <p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p> 
 
      </p> 
 
     </div> 
 
     <div id="content_4" class="content"> 
 
      <img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;"> 
 
      <p style="float:left; text-align:center; font-style:italic; padding-left:8px;"> 
 
      <p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p> 
 
      <p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p> 
 
      </p> 
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

Answer 1

Добавить display: inline-block; для ul.tabs li a это поможет

См скрипку: http://jsfiddle.net/sachinkk/1b2m3rsq/