title: How can I set a tab to open 50% in desktop and 100% in mobile using JavaScript?
body: <p>I want a tab that will open 50% in window and 100% on mobile phone, how can I achieve this by using js. Here is my js fill which I am using right now.</p>
  <pre class="lang-js prettyprint-override"><code>    &lt;script&gt;
          function openNav() {
            document.getElementById(&quot;mySidecmnt&quot;).style.width = &quot;100%&quot;;
          }
          
          function closeNav() {
            document.getElementById(&quot;mySidecmnt&quot;).style.width = &quot;0&quot;;
          }
      &lt;/script&gt;
  </code></pre>
  <p>Html file</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div id=&quot;mySidecmnt&quot; class=&quot;sidecmnt&quot;&gt;
            &lt;a href=&quot;javascript:void(0)&quot; class=&quot;closebtnsty&quot; onclick=&quot;closeNav()&quot;&gt;&lt;svg width=&quot;25&quot; height=&quot;25&quot; viewBox=&quot;0 0 25 25&quot; class=&quot;hp&quot;&gt;&lt;path d=&quot;M18.13 6.11l-5.61 5.61-5.6-5.61-.81.8 5.61 5.61-5.61 5.61.8.8 5.61-5.6 5.61 5.6.8-.8-5.6-5.6 5.6-5.62&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
                  
          &lt;!-- comments --&gt;
          &lt;?php 
              if (comments_open() || get_comments_number()) :
                  comments_template();
              endif;
          ?&gt;
          &lt;!-- end comments --&gt;
      &lt;/div&gt;
      &lt;span style=&quot;font-size:30px;cursor:pointer&quot; onclick=&quot;openNav()&quot;&gt;open&lt;/span&gt;
  </code></pre>