Problema Visibilidade No Célular (Alterando CSS do Iframe do BliP no WP)

Pessoal,

Colocamos o BLiP para rodar em nosso site construido em wordpress.
Estamos com o problema classico de o tema estar sobrepondo o chat no célular.
Segue URL: http://www.decorafit.com.br

O problema se da, como em outros posts passados, no elemento “.position: Absolute” do iframe do BLiP. No browser, se eu mudo este elemento para “initial” tudo funciona muito bem.

Meu problema é que ja tentei mudar este elemento no .css do wordpress de varias maneiras e não funcinou.

Seguem as maneiras que tentei:

Tentei na aba customizar > CSS Adicional:

Tentei mudar no custom.css do tema que estamos usando, também sem sucesso:

Tentei usar o comando .WithCustomStyle:

Todos esses passos deveriam sobrepor o .CSS original.

vale ressaltar que esta configuração vem do código do BLiP:
(https://unpkg.com/blip-chat-widget)

Alguma ideía do que eu possa estar fazendo errado ou o que mais eu poderia tentar?

Agradeço desde ja!

Olá @Hugo_Guimaraes

Tente forçar o estilo CSS usando um !important e veja se funciona.

1 Curtida

Olá Bruno, Obrigado pela resposta.

A ideia de usar o !important foi boa e não tinha testado, porém não funcionou.

Eu testei utilizando os dois primeiros metodos mencionados no meu post e a seguinte regra:

@media screen and (max-width: 480px), screen and (max-height: 420px)
#blip-chat-container #blip-chat-iframe {
    right: 0px;
    bottom: 0px !important;
    max-height: 100vh !important;
    width: 100vw;
    position: initial !important;
    box-shadow: none;
}

Eu também tentei a seguinte regra:

@media screen and (max-width: 480px), screen and (max-height: 420px){
	#blip-chat-container{
		position: initial !important;
	}
	#blip-chat-iframe {
		position: initial !important;
	}
}

Eu não estou acostumado com front-end
Não sei se é problema na sintaxe do .CSS (Ja olhei varios documentos e parece estar)

Eu também olhei todos os .css do tema para ver se não tinha nenhum outro “!important” no iframe sobrepondo a nossa regra mas não encontrei nada também.

Você teria mais alguma sugestão?

Bruno.

Deu certo. Eu usei o !important que você mencionou e a opção Fixed para o Position.
Coloquei o código na personalização de aparencia do WordPress:

image

Muito obrigado pelo suporte!

1 Curtida

Que bom @Hugo_Guimaraes. Fico feliz em ajudar. Qualquer coisa que precisar, procura a gente!

Tenha um ótimo final de semana :grin:

1 Curtida

Este tópico foi fechado automaticamente 7 dias depois da úlima resposta. Novas respostas não são mais permitidas.