Blockuserinfo Problem In Smartphones

[[email protected]]

Hello all,

 

I've a problem with the display of the blockuserinfo options in smartphones

 

In the laptop everything is normal:

 

The same page in the smartphone open the options outside the screen:

 

 

 

I understand that the problem should be solve with a CSS property but I have not idea which one. The html code of the page is this: 

 

 

<div class="header_user_info popup-over e-translate-top">

                    <div data-toggle="dropdown" class="popup-title"><a href="#"><i class="fa fa-gear"></i> <span>Ajuste</span></a></div>

                    <ul class="links">

                                         <li><a class="login" href="http://www.xxxxxx.es/mi-cuenta" rel="nofollow" title="Ingrese a su cuenta de cliente">

                                                                                <i class="fa fa-edit"></i>Registrarse

                                                            </a></li>

                                       

                                        <li>

                                                            <a href="http://www.xxxxx.es/mi-cuenta" title="Mi cuenta"><i class="fa fa-user"></i>Mi Cuenta</a>

                                        </li>

                                        <li class="last">

                                                            <a href="http://www.xxxxxx.es/pedido" title="Revisa" class="last"><i class="fa fa-repeat"></i>Revisa</a>

                                        </li>

                                        <li class="first">

                                                            <a id="wishlist-total" href="http://www.xxxxxx.es/module/blockwishlist/mywishlist" title="Mis listas de regalo">

                                                            <i class="fa fa-heart"></i>Lista de deseos</a>

                                        </li>

                                        <li>

                                                            <a href="http://www.xxxxxx.es/comparativa-productos" title="Comparar" rel="nofollow">

                                                            <i class="fa fa-refresh"></i>Comparar

                                                            </a>

                                        </li>

                    </ul>

</div>

 

and the CSS is this one: 

 

#topbar {

  min-height: 50px;

  font-size: 14px;

  background: white;

  border-bottom: 1px solid #eaeaea;

}

#topbar .container {

  background: white;

  color: #666666;

}

#topbar .links {

  padding: 13px 0 12px;

}

#topbar .links li {

  border-right: #eaeaea;

  border-style: none solid none none;

  border-width: 0 1px 0 0;

}

.rtl #topbar .links li {

  border-left: #eaeaea;

  border-right: inherit;

}

.rtl #topbar .links li {

  border-style: none none none solid;

}

.rtl #topbar .links li {

  border-width: 0 0 0 1px;

 

I apreciate any help you can provied.

 

Regards

Edited January 10, 2016 by [email protected] (see edit history)