I'm trying to move a object with a @media in css.
I'm trying to make a pop up in css with an arrow and I'm trying to make it responsive.
The popup activates when clicked on the "CV".
My goal is to make the popup responsive. So that on the mobile version the arrow is moved.

Here is my code:

<!-- entire code https://codepen.io/Yung_n-d/pen/mdwQGqX  -->

<div class="popup" onclick="myFunction()"><p>CV</p>
<span class="popuptext" id="myPopup"><a target="_blank" id="cv" href="img/CV.pdf">View </a><a id="cv" download="img/CV.pdf" href="">Download </a><i class="fa fa-remove"></i></span>
</div>

  /* The actual popup */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -310px;
  }
  @media only screen and (max-width:600px){
      .popup .popuptext{
        margin-left: -170px;
      }
      .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 10%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
  }

  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

  #cv{
      text-decoration: none;
      color:white;
      font-weight: bold;

CodePudding user response：

Problem: .popup .popuptext::after in line 326 was overridden by line 339.

Solution: Try to move that @media block in line 326 to line 349, and then adjust your code again to match your goal.