google翻訳 設置について

Question

当院のwebサイトにてgoogle翻訳を入れたところこelement.styleにpositionなどが追加されてしまい攻略できず苦しんでいます。
*レスポンシブした際にヘッダーにelement.styleが影響してしまています。
レスポンシブはgoogleクロームのデベロッパーツールで確認しています。

通常のelement.style（追加していないページ）
margin-topのみ

追加した際のelement.style
style="position: relative; min-height: 100%; top: 0px; margin-top: 〇〇〇px;"

ご教授いただければと思います。
よろしくお願いします。

Comments

[kei344]

element.styleはどの要素についてでしょうか。

[liz5527]

bodyに自動でつくのですが、headerが下がって来てしまいcontentsの上部に被ってしまっています。

Answer 1

もともとのスタイル指定が、自動的に付与されるstyle属性によって打ち消されてしまう、ということですよね。

CSSの!importantルールを利用して、style属性よりも優先されるスタイルを指定してはどうでしょうか?

Comments

[liz5527]

試してみたのですがダメでしたOTL

Answer 2

body {
	margin-top: 0 !important;
}

とりあえず上記CSSを追加するだけで高さの問題は解決できると思うのですが、試されたのはこれと違うということでしょうか。
また、そもそもこのウィジェットがレスポンシブに対応していないようなので、一定幅以下の際は読み込まないようにするなどする必要があるのでは。（もしくはレスポンシブに対応したウィジェットに変えるとか）

Comments

[liz5527]

ありがとうございました！
無事解決いたしましたm(_ _)m