В выпадающем меню во вкладке не показывает контент на мобильных устройствах

У меня есть выпадающее меню с вкладками. На компьютерах работает хорошо, на мобильных устройствах отоброжает контент только в одной вкладке "active", когда нажимаешь на вкладку "register" показывает тот же контент, что и на активной вкладке. Пробовал применять css @media (max-width: 768px) { .tab-content > .tab-pane{display: block;}} в этом случае 2 контента отоброжает на активной вкладке. Как сделать так, чтоб две вкладки были активные на мобильных и отображали контент в нужной вкладке.

Форма

     <div class="dropdown messages-menu">
  
  <a  href="#" class="dropdown-toggle" data-toggle="dropdown">
    <span class="tmarketst"><i  class="porto-icon-user-2" ></i></span>  My Profile
  </a>
  <div class="dropdown-menu">
    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a data-target="#home" data-toggle="tab">Log in </a></li>
      <li><a data-target="#profile" data-toggle="tab">Register</a></li>
      
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="home"><?php echo do_shortcode("[wc_login_form_mmy]"); ?> </div>
      <div class="tab-pane" id="profile"><?php echo do_shortcode("[wc_reg_form_mmy]"); ?></div>
      
    </div>
  </div>
</div>

CSS

      .dropdown-menu ul{transition-duration: .25s;
      
      list-style: none;
      text-align: center;
      padding: 20px 20px 25px 20px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      color: #4D4D4D;
      background-color: none;}
      
    
    .dropdown-menu > ul > li {font-size:15px;
    } 
    @media (max-width: 459px) {
        .dropdown-menu > ul > li {font-size:10px;  
    }}
    
    .dropdown-menu ul:hover:before {
      -webkit-transform: translateY(70%);
      transform: translateY(70%);
    }
    .tabs > li.active {
      color: #4D4D4D;
    }
    .dropdown-menu ul.active:before {
      transition-duration: .5s;
        background-color: #4D4D4D;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    .tab-content{font-size:14px;}
    @media (max-width: 459px) {
    .tab-content{font-size:10px;}}
.dropdown-menu:hover {display: inline-block}