estilo paginación mobile

Hola.

Cual es el problema ¿ Que se ve cortado ?

Si es eso, prueba añadir lo siguiente a tu archivo de estilos CSS " /templates/xtec/css/xtec-custom.css

.component-content .pagination ul li a, .component-content .pagination ul li span {
    line-height: 20px;
}

Un saludo

Mejora, pero parece q hace mas ´alta´ la línea.
¿Podría poner los números en una línea y las palabras en otra? Algo como esto:

Hola

Lo que comentas, por estructura, no lo veo fácil de lograr, sin embargo puedes mejorar un poco el diseño, prueba con el siguiente código :

.component-content .pagination:after{
  content:"";
  display: block;
  clear:both;
}

.component-content .pagination .counter + ul li span, 
.component-content .pagination .counter + ul li a{
  border:1px solid #ccc;
  line-height: 10px;
  padding:8px;
  margin:0;
  background-color:#f5f5f5;
  border-radius: 2px;
  font-size:12px;
  margin-bottom:40px;
}

Saludos.

Gracias Jhon, he puesto el código tal y como me los pasa y no se aprecia ningún cambio..

.component-content .pagination ul li a, .component-content .pagination ul li span {
    line-height: 25px;
}

.component-content .pagination:after{
  content:"";
  display: block;
  clear:both;
}
 
.component-content .pagination .counter + ul li span, 
.component-content .pagination .counter + ul li a{
  border:1px solid #ccc;
  line-height: 10px;
  padding:8px;
  margin:0;
  background-color:#f5f5f5;
  border-radius: 2px;
  font-size:12px;
  margin-bottom:40px;
}

Hola.

Elimina los dos códigos que te pasamos antes, el que te pase yo y el que te paso jhon y añades el siguiente:

@media only screen and (max-width: 600px) {
.component-content .pagination ul li a, .component-content .pagination ul li span {
  content:"";
  border:1px solid #ccc!important;
  line-height: 10px!important;
  padding:8px!important;
  margin:0!important;
  background-color:#f5f5f5!important;;
  border-radius: 2px!important;;
  font-size:12px!important;;
  margin-bottom:5px!important;;
}
}

Revisa si mejora

Un saludo

Si, ha mejorado bastante... pero me gustaría poder separar las líneas, solo en caso de vista movil, desde la página 5. Adjunto capturas de pantalla de como queda y como me gustaría...

Entiendo q para esto será necesario tocar el PHP de Joomla q se encarga de la paginación, con saber q código se encarga sería suficiente.

Hola.

Pues sera complicado pero bueno, prueba si esto te sirve:

@media only screen and (max-width: 600px) {
.pagination-next {
	float: left!important;
	margin-top: 0em!important;
}

.pagination-prev {
	float:left!important;
	margin-top:9em!important;
}
.pagination-end {
	float: left!important;
	margin-top: 0em!important;
}

.pagination-start {
	display: none!important;
}

.component-content .pagination {
	margin-left:0em!important;
}
}

Un saludo

Se pierden los botones de Inicio y Anterior... pero cerrar el hilo, me quedo con la versión anterior.

Gracias por vuestra ayuda!!!