Avisos
Vaciar todo

[Resuelto] Ampliar barra comparador  

 
Alba
 Alba
Estimable Member

Hola,

Nos gustaría extender la toolbar del comparador por la parte de abajo, en concreto como hemos señalado en azul en la siguiente captura:

Captura

Dejando unos pequeños márgenes y el texto en el centro.

Por favor, ¿nos podéis ayudar?

Muchas gracias.

Contenido solo visible a usuarios registrados

Respondido : 16/06/2021 11:11 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alba,

Puedes probar el siguiente código, el cual hará el botón ancho completo

.berocket_compare_widget_start .berocket_show_compare_toolbar {
height: 50px !important;
width: 100% !important;
}

Nos comentas que tal, Saludos

Respondido : 16/06/2021 11:22 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alba
 Alba
Estimable Member

@bruno-vichetti Hola,

Sí, el código funciona. 

Pero como decíamos, nos gustaría dejar pequeños márgenes en los laterales para que la barra no ocupara toda la parte de abajo:

Captura

 

¿Cómo podríamos hacerlo?

Muchas gracias!

Respondido : 17/06/2021 12:24 am
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alba,

Entiendo, modifiquemos el código de la siguiente manera

.berocket_compare_widget_start .berocket_show_compare_toolbar {
height: 50px !important;
width: 90% !important;
margin: 0px 5%;
}

Saludos!

Respondido : 17/06/2021 12:34 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Alba
 Alba
Estimable Member

@bruno-vichetti Sí, funciona. Queda mucho mejor.

¿Y cómo podríamos hacer lo siguiente?:

Captura

Es decir, centrar:

1. Botón "Compara aquí"

2. Flecha desplegable.

Gracias como siempre y saludos.

Respondido : 18/06/2021 1:16 am
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alba,

He visto el ajuste y ha quedado muy bien, ahora con respecto a tus nuevas solicitudes te comento podemos hacer que el botón de "Compara Aqui" tome un ancho del 100% y este centrado.

La flecha desplegable también podría quedar centrada con lo siguiente...

.berocket_compare_widget .berocket_open_compare {
width: 100%;
text-align: center;
}
.berocket_hide_compare_toolbar{
width: 100%;
}

Saludos

Respondido : 18/06/2021 1:26 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Alba
 Alba
Estimable Member

@bruno-vichetti Queda muy bien Bruno!

flecha

Podríamos hacer que la flecha sea un poco mas grande? o de otro color? ahora no se ve mucho

muchas gracias!

Respondido : 29/06/2021 2:02 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alba,

Para aumentar y cambiar de color el estilo de la flecha puedes probar lo siguiente:

.berocket_hide_compare_toolbar .fa-angle-down{
color: #2fbdb7;
font-size: 25px;
}

Debes tener en cuenta que si aumentas demasiado el tamaño de la flecha se apregara una barra de scroll al contenedor.

Saludos

Respondido : 29/06/2021 2:13 pm

Cursos Gratuitos WordPress

Alba
 Alba
Estimable Member

@bruno-vichetti Perfecto, ahora queda todo genial.

Muchas gracias!

Respondido : 03/07/2021 11:00 am