Fallo Modulo Blockuserinfo En Móbiles

[[email protected]]

Buenos días,

 

Tengo un problema con el despliegue de las opciones del módulo blockuserinfo en móbiles.

 

En el pc se ve todo normal:

 

Cuando abro la página en el móbil y pincho las opciones la lista de despliega fuera de la pantalla:

 

 

Entiendo que tiene que ser una propiedad que falta en el CSS para limitarlo pero no sé lo que es. El código que se genera es este:

 

<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.xxxxx.es/comparativa-productos" title="Comparar" rel="nofollow">

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

                                                            </a>

                                        </li>

                    </ul>

</div>

 

y el CSS que aplica al links es el que sigue:

 

#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;

 

Agradecería si alguien me pudiese orientar en el problema.

 

Saludos

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