html – Limit JavaScript function to specified screen width

Help guys…everything works until website goes to tablet/mobile widht…than JS start to act crazy. I understand that its because there is two actions under one funciton, but is there any way to separate this and/or to limit add/remove class .currentline to specified screen width.

When its in tablet/mobile size i have dropdown menu so i dont need animated lines from .lineparent



<div class="albmenu"id="albmenu">
            <ul id="gallery-links">
      <li><div class="lineparent"><div class="line currentline"></div></div>
          <a href="#gallery" data-gallery="grid" data-line="line">All</a></li>

       <li><div class="lineparent"><div class="line2"></div></div>
           <a href="#gallery" data-gallery="grid2" data-line="line2">Weddings</a></li>
       <li><div class="lineparent"><div class="line3"></div></div>
            <a href="#gallery" data-gallery="grid3" data-line="line3">Business</a></li>
       <li><div class="lineparent"><div class="line4"></div></div>
            <a href="#gallery" data-gallery="grid4" data-line="line4">Sports</a></li>

<div class="dropdown" id="dropdown">
              <button onclick="myFunction()" class="dropbtn">Category</button>
              <div id="myDropdown" class="dropdown-content">
                <a value="Family" href="#gallery" data-gallery="grid">All</a>
                <a value= "" href="#gallery" data-gallery="grid2">Weddings</a>
                <a value= "" href="#gallery" data-gallery="grid3">Business</a>
                <a value= "" href="#gallery" data-gallery="grid4">Sports</a>

JS :

window.addEventListener('DOMContentLoaded', () => {

    document.querySelector('#albmenu').addEventListener('click', (event) => {
      if ( === 'A') {
        let galleryName ='data-gallery');
        let lineName ='data-line');



.lineparent {
    width: 35%;
    height: 2px;
  .line6 {
    width: 100%;
    height: 2px;
    background-color: var(--textcol);
    opacity: 0;

  .currentline {
    opacity: 1;
    animation: linewidth 0.5s;

  @keyframes linewidth {
    from {
      width: 0;
    to {
      width: 100%;

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here