ブラウザのズームインとズームアウト時にdiv内にコンテンツを保持する

ウェブサイトをズームイン/ズームアウトすると、ナビゲーションバーと「オープンタッチ」のテキストがdivから外に出て、ナビゲーションバー私がズームインすると、それは単語ごとに消えているようです。私は過去2日間これを修正しようとしていましたが、このウェブサイトでは何も動作していないようです。私のコードとコードが利用できるようになりますブラウザのズームインとズームアウト時にdiv内にコンテンツを保持する

「オープンタッチ」テキストがナビゲーションバーと重ならないようにするにはどうすればよいですか？

デモ：http://codepen.io/anon/pen/xqLLeJ

すべてのヘルプは高く評価され、HTML

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 


     <link rel="stylesheet" type="text/css" href="magicstyle.css"> 


     <body> 
      <!-- Section for Jobs Popup --> 
       <div id="job-popup"> 
       <div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div> 
        <div id="job-content"> 
        <h1 id="jobWords">Test</h1> 

        </div> 

       </div> 
      <!-- Section for Contact Popup --> 
      <div id="contact-popup"> 
      <div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div> 
      <div id="contact-content"> 

       <h1 id="contactWords">Test</h1> 

       </div> 

      </div> 

      <!-- Section for Press Popu --> 
      <div id="press-popup"> 
      <div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div> 
      <div id="press-content"> 

       <h1 id="pressWords">Test</h1> 

       </div> 

      </div> 

      <div id="legal-popup"> 
      <div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div> 
      <div id="legal-content"> 

       <h1 id="legalWords">Test</h1> 

       </div> 

      </div> 

      <div id="support-popup"> 
      <div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div> 
      <div id="support-content"> 

       <h1 id="supportWords">Test</h1> 

       </div> 

      </div> 



       <div id="top-bar"> 
         <a class="burger-nav"></a> 
        <div id="nav-menu"> 
        <span id="job">Jobs</span> 
        <span id="contact">Contact</span> 
        <span id="press">Press</span> 
        <span id="legal">Legal</span> 
        <span id="support">Support</span> 

        </div> 


       </div> 
      <div id="container"> 


       <div id="name-div"> 
       <h1 id="name">Open Touch</h1> 
       </div> 
       <ul class="bubbles"> 

      <li id="firstCircle"></li> 
      <li id="secondCircle"></li> 
      <li id="thirdCircle"></li> 
      <li id="fourthCircle"></li> 
      <li id="fifthCircle"></li> 
      <li id="sixthCircle"></li> 



      </ul> 



      </div> 

     </body> 



    </head> 




</html>

、は

出典

2017-03-14 Jagr

からoverflow: hiddenを取り出しありがとうございましたあなたは応答デザインのことを聞いたことがありますか？ – Nicholas

それはメディアクエリですか？ – Jagr

が

#nav-menu { 
    width: 50%; 
    height: 70%; 
    position: absolute; 
    z-index: 101; 
    word-wrap: break-word; 
    /* overflow: hidden; */ 
    left: 15%; 
    top: 20%; 
}

出典

2017-03-14 22:39:02 Nicholas

ありがとう、あなたの助けをありがとう：Dと私はjqueryを使用して人がタブの1つを開き、 "x"をクリックして閉じると仮定しているが、それは何らかの理由で閉じていない。 codeine.io/anon/GWvXQL – Jagr

http://codepen.io/anon/pen/GWvXQL – Jagr

ブラウザのズームインとズームアウト時にdiv内にコンテンツを保持する

答えて

関連する問題