I was making the website responsive and it turned out one of the elements(the wavy line) is not displaying on mobile phones. However it displays when i check mobile sizes on devtools.
Here is my code:

html:

<div class="wavy-line wavy-line-green" ></div>

css:

.wavy-line {
    width: 150px;
    height: 50px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 120px;
  }
  .wavy-line:before {
    content: "xxxxxxxxxxxxxx";
    position: relative;
    top: -35px;
    color: transparent;
    width: calc(100% + 27px);
    font-size: 45px;
    text-decoration: wavy #194027 underline;
    animation: animate 1.5s linear infinite;
    -webkit-animation: animate 1.5s linear infinite;
  }
  
  @keyframes animate {
    0% { left: -0px; }
    100% { left: -45px;}
  }
  @-webkit-keyframes animate {
    0% { left: -0px; }
    100% { left: -45px;}
  }
  
  .wavy-line-green:before { 
    text-decoration-color: #194027; 
  }

i didn’t change anything on mediaqueries

and here is link to my website also:
https://daryna-budz.github.io/tantillo/

ty in advance!

I tried to change the width and display properties but it does nothing