Avisos
Vaciar todo

[Resuelto] Elemento acordeón en plantilla Bridge: personalizarlo para que tenga el mismo alto y ancho siempre

6 Respuestas
2 Usuarios
0 Reactions
19 Visitas
 Sara
Respuestas: 9
Active Member
Topic starter
 

Buenas!

 

Estoy utilizando la plantilla Bridge en la web:

 

https://saralealmarketing.com/centrodeestudios3c/ingles3/

 

Y en esta página en concreto he metido el elemento acordeón. Dependiendo de si el texto está en una, dos o tres filas, el ancho del acordeón desplegable es diferente (donde aparece el título) es posible tener algún código CSS para que siempre tenga la misma medida independientemente del número de palabras?

 

Gracias

 

Contenido solo visible a usuarios registrados


 
Respondido : 10/11/2020 8:29 am
Tags del tema
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Sara, Buenos Días.

 

Supongo que te refieres a esto:

screenshot saralealmarketing.com 2020.11.10 09 46 18

 

Revisa si con esto se soluciona:

qode-accordion-holder .qode-title-holder .qode-tab-title span.qode-tab-title-inner:only-child {
height: inherit;
}

 

Un saludo


 
Respondido : 10/11/2020 8:47 am
 Sara
Respuestas: 9
Active Member
Topic starter
 

hola @pepe, gracias por tu respuesta.

 

 

Sí, me refiero a esa parte pero he copiado el texto que me pasas en la parte de CSS y no ha funcionado. Cuando hago la pantalla más pequeña, algunos de los acordeones tienen 4 líneas ya que el texto es mayor mientras que otros tienen 1 sola línea y no consigo que todos tengan el mismo tamaño manteniendo el mismo tamaño de letra.

Screenshot 2020 11 10 at 11.22.07

 


 
Respondido : 10/11/2020 10:25 am
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Sara.

Podrías añadir un tamaño fijo, por ejemplo:

.qode-accordion-holder .qode-title-holder .qode-tab-title span.qode-tab-title-inner:only-child {
height: 6em;
}

 

Y luego jugar con las resoluciones:

@media only screen and (max-width: 600px) {

.qode-accordion-holder .qode-title-holder .qode-tab-title span.qode-tab-title-inner:only-child {
height: 7em;
}

}

 

Con la opción " max-width: 600px " podemos ir jugando con las diferentes resoluciones de pantalla.

 

Un saludo

 


 
Respondido : 10/11/2020 12:10 pm
 Sara
Respuestas: 9
Active Member
Topic starter
 

Mil gracias! ha funcionado 😀 😀


 
Respondido : 10/11/2020 1:10 pm
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Sara.

Nada, Gracias a ti 😀 

cualquier consulta que tengas no dudes en comunicarlo 😉 

 

Cerramos el tema.

 

un saludo

 

 


 
Respondido : 10/11/2020 2:09 pm