[Resuelto] Ampliar barra comparador

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

@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:

¿Cómo podríamos hacerlo?

Muchas gracias!

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!

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

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

Es decir, centrar:

1. Botón "Compara aquí"

2. Flecha desplegable.

Gracias como siempre y saludos.

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

@bruno-vichetti Queda muy bien Bruno!

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

muchas gracias!

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

@bruno-vichetti Perfecto, ahora queda todo genial.

Muchas gracias!