title: Show all content in a fixed positioned element
body: <p>I have a fixed element in my project and when I view it in mobile the text in the element gets hidden because of the viewport scale. How can I have my content shown in responsive design when my parent element has a <code>fixed</code> position ?</p>
  
  <p>The text is in the <code>&lt;div id="about-accordion"&gt;</code> part of my code :</p>
  
  <p>Here is My Code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var accordions = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; accordions.length; i++) {
    accordions[i].addEventListener("click", function() {
      var patt = /(accordion-)(\d)/gm;
      var match = patt.exec(this.id);
      panel = document.getElementById("panel-" + match[2]);
  
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panels = document.getElementsByClassName('panel');
        for (j = 0; j &lt; panels.length; j++) {
          if (panels[j].id != panel.id) {
            panels[j].style.maxHeight = null;
            if (accordions[j].id != this.id)
              accordions[j].classList.remove('active');
          }
        }
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
  
      this.classList.toggle("active");
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    background-color: black;
  }
  
  .title {
    text-align: center;
    background-color: white;
    color: black;
    height: 100px;
    padding: 35px 0;
    margin: 0;
    width: 100%;
    z-index: 1;
    position: fixed;
    font-family: Clearface, sans-serif;
    /* Here you may change the name of the font family of the Header Title*/
    font-size: 40px;
    /* Here you may change the font size of the Header Title*/
  }
  
  .header #accordion-0 {
    font-size: 25px;
  }
  
  #about {
    background-color: black;
    color: white;
    float: left;
    width: 50%;
    height: 100vh;
    font-family: Clearface, sans-serif;
    margin-top: 170px;
    position: fixed;
  }
  
  #about h2 {
    font-size: 80px;
    /* Here you may change the font size of the About Title in desktop*/
    padding: 30px 70px 0 70px;
  }
  
  #about p {
    font-size: 30px;
    /* Here you may change the font size of the About Paragraph in desktop*/
    padding: 70px;
    padding-top: 0;
  }
  
  #projects .accordion {
    background-color: #333648;
    color: white;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 17px;
    transition: 0.5s;
    height: 20%;
    font-family: 'Univers LT Std', sans-serif;
    /* Here you may change the name of the font family of Each Project Link*/
    font-size: 20px;
    /* Here you may change the font size of Each Project Link*/
    opacity: 0.7;
  }
  
  #projects .active,
  #projects .accordion:hover {
    background-color: #ccc;
    color: black;
    opacity: 1;
  }
  
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.3s ease-out;
  }
  
  .post {
    padding: 0 20%;
  }
  
  .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 50px auto;
  }
  
  #projects {
    float: right;
    width: 50%;
    height: 100vh;
    font-family: 'Univers LT Std', sans-serif;
    /* Here you may change the name of the font family of Each Project*/
    font-size: 20px;
    /* Here you may change the font size of Each Project*/
    margin-top: 170px;
  }
  
  #about-accordion h2,
  #about-accordion p {
    font-family: Clearface, sans-serif;
  }
  
  #about-accordion .panel {
    background-color: black;
    color: white;
  }
  
  #about-accordion {
    font-size: 30px;
    /* Here you may change the font size of About Section in mobile*/
  }
  
  
  /* Smartphones (portrait and landscape) ----------- */
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .header #accordion-0 {
      padding-right: 1em;
    }
    #emma-back {
      padding-left: 1em;
    }
    #about {
      display: none;
    }
    #projects {
      width: 100%;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  
  /* iPads (portrait and landscape) ----------- */
  
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #about {
      display: none;
    }
    #projects {
      width: 100%;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .header #accordion-0 {
      padding-right: 1em;
    }
    #emma-back {
      padding-left: 1em;
    }
  }
  
  
  /* Desktops and laptops ----------- */
  
  @media only screen and (min-width: 1224px) {
    #about-accordion {
      display: none;
    }
    .header #accordion-0 {
      display: none;
    }
    #dash {
      display: none;
    }
  }
  
  
  /* Large screens ----------- */
  
  @media only screen and (min-width: 1824px) {
    #about-accordion {
      display: none;
    }
    .header #accordion-0 {
      display: none;
    }
    #dash {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="header title"&gt;
    &lt;span id="emma-back"&gt; Hello &lt;br&gt; Back &lt;/span&gt;
    &lt;span id="dash"&gt; - &lt;/span&gt;
    &lt;span id="accordion-0" class="accordion"&gt;About Me&lt;/span&gt;
  &lt;/h1&gt;
  
  &lt;div id="about"&gt;
    &lt;h2&gt;
      Hello!
    &lt;/h2&gt;
  
    &lt;p&gt;
      Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
      överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="projects"&gt;
    &lt;div id="about-accordion"&gt;
      &lt;div id="panel-0" class="panel"&gt;
        &lt;div class="post"&gt;
          &lt;h2&gt;
            Hello!
          &lt;/h2&gt;
  
          &lt;p&gt;
            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
            överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus
            PageMaker.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button id="accordion-1" class="accordion"&gt;Project 1&lt;/button&gt;
    &lt;div id="panel-1" class="panel"&gt;
      &lt;div class="post"&gt;
        &lt;h2&gt;TITLE HEADING&lt;/h2&gt;
        &lt;p&gt;
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        &lt;/p&gt;
        &lt;div&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button id="accordion-2" class="accordion"&gt;Project 2&lt;/button&gt;
    &lt;div id="panel-2" class="panel"&gt;
      &lt;div class="post"&gt;
        &lt;h2&gt;TITLE HEADING&lt;/h2&gt;
        &lt;p&gt;
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  
        &lt;/p&gt;
        &lt;div&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button id="accordion-3" class="accordion"&gt;Project 3&lt;/button&gt;
    &lt;div id="panel-3" class="panel"&gt;
      &lt;div class="post"&gt;
        &lt;h2&gt;TITLE HEADING&lt;/h2&gt;
        &lt;p&gt;
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  
        &lt;/p&gt;
        &lt;div&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button id="accordion-4" class="accordion"&gt;Project 4&lt;/button&gt;
    &lt;div id="panel-4" class="panel"&gt;
      &lt;div class="post"&gt;
        &lt;h2&gt;TITLE HEADING&lt;/h2&gt;
        &lt;p&gt;
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  
        &lt;/p&gt;
        &lt;div&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button id="accordion-5" class="accordion"&gt;Project 5&lt;/button&gt;
    &lt;div id="panel-5" class="panel"&gt;
      &lt;div class="post"&gt;
        &lt;h2&gt;TITLE HEADING&lt;/h2&gt;
        &lt;p&gt;
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  
        &lt;/p&gt;
        &lt;div&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
          &lt;img src="images/placeholder.jpg" class="img-responsive"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Zoom when you run the code snippet in in full page mode to see what I mean</p>