title: Html body not taking full width when switching to mobile device
body: <p>I have a responsive web-page, which works fine on pc view. The problem is when I inspect as a mobile device, the html just gets 3/4 of the screen. I know which CSS class causes the problem, but I can't figure out why (specially because the class just affects a section), and without it a whole section goes away. Does anyone know why it happens or how to fix it?</p>
  
  <p>Further search has revealed that the property causing the problem is: </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-css lang-css prettyprint-override"><code>.rl-section:before {
      position: absolute;
      content:'';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, I don't know how to do it in a different way which doesn't cause anything to crash.</p>
  
  <p>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-css lang-css prettyprint-override"><code>&lt;style type="text/css"&gt;
  .rl-section {
      position: relative;
      
  }
  .rl-section:before {
      position: absolute;
      content:'';
  }
  
  .rl-diagonal {
      z-index: 1;
      padding: 3em;
  }
  .rl-diagonal:before {
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      -webkit-transform-origin: -3% 0;
      transform-origin: -3% 0;
      top: 0;
      left: -25%;
      z-index: -1;
      width: 150%;
      height: 75%;
      background: inherit;
  }
  &lt;/style&gt;
  
  
  &lt;style type="text/css"&gt;
      
  .lr-section {
      position: relative;
  
  }
  .lr-diagonal {
      text-align: center;
      -moz-transform: scale(-1, 1);
      -webkit-transform: scale(-1, 1);
      -o-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
      transform: scale(-1, 1);
  }
  .lr-content {
     -moz-transform: scale(-1, 1);
      -webkit-transform: scale(-1, 1);
      -o-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
      transform: scale(-1, 1);
  }
  .lr-section:before {
      position: absolute;
      content:'';
  }
  
  
  .lr-diagonal {
      z-index: 1;
      padding: 3em;
  }
  .lr-diagonal:before {
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      -webkit-transform-origin: -3% 0;
      transform-origin: -3% 0;
      top: 0;
      left: -25%;
      z-index: -1;
      width: 150%;
      height: 75%;
      background: inherit;
  } 
  
      
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="first-section" style="padding: 5px 5px 15px; height: 500px;"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col s6"&gt;
              &lt;img src="#"&gt;
            &lt;/div&gt;
            &lt;div class="col s6"&gt;
              &lt;p class="center-align"&gt;text&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
          
      &lt;/div&gt;
      &lt;div class="lr-diagonal lr-section" style="background-color:blue"&gt;
        &lt;div class="lr-content"&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rl-diagonal rl-section" style="background-color:black;"&gt;
      &lt;div class="lr-content"&gt;
          &lt;img src="#"&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for the help!</p>