ワードプレスで「-webkit-transform: 」「transform:」を無効化するCSSの書き方

前提・実現したいこと

ワードプレスで有料テーマを買ってHP制作しています。
自動でレスポンシブしてくれる仕様なのですが・・・

画面の下に「登録はこちら」のようなボタンを固定化したいのですが、
下記のCSSが邪魔をしているようです。

ディベロッパーツールを使用して、下記のCSSの消せば実現されることはわかりました。
「-webkit-transform: 」
「transform:」を無効化する方法はありますか？

画像内の
「-webkit-transform: 」
「transform:」のチェックを外す（無効化する）と実現されます。

無効化するにはなんと書けばいいでしょうか？

発生している問題・エラーメッセージ

該当のソースコード

@media only screen and (max-width: 767px)
body.anim_disable_mobile_landscape .wtbx_vc_el_container, body.anim_disable_mobile_landscape .wtbx_vc_child_container {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0,
0deg
);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0,
0deg
);

だと思います。

試したこと

テーマのCSSを上書きしようと思い、

@media screen and (max-width: 767px)
.anim_disable_mobile_landscape .wtbx_vc_el_container, .anim_disable_mobile_landscape .wtbx_vc_child_container {
-webkit-transform: none;
transform:none;
}

と書きましたが直りません。

補足情報（FW/ツールのバージョンなど）

ボタン実装に使用したHTML、CSSは下記のサイトのコピペです。
https://rilaks.jp/blog/cro/floating-banner/#%E3%83%95%E3%83%AD%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%90%E3%83%8A%E3%83%BC%E3%82%92HTML%E3%81%A8CSS%E3%81%A0%E3%81%91%E3%81%A7%E4%BD%9C%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3

初心者なのでわからないことも多いかもしれませんが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

CSSセレクターの詳細度が元の物より下になってますので効きません。
詳細度を元のものと同じにするか、上げてください。

.anim_disable_mobile_landscape → body.anim_disable_mobile_landscape

これで、transform:none;が効くようになります。
ただし、これが効いても見た目に変化はないです。
現状のtransformの設定が、translate、rotateが0、scaleが1なのでなんの変化もしていないです。

もし、現状の設定を削除して変化したのなら、別の部分で設定しているCSSが効いていることになります。

投稿2021/06/29 04:47

hatena19

総合スコア34084

suudesu

2021/06/30 04:48

hatena19さま、ご回答ありがとうございます！！！また、お礼が遅くなり申し訳ありません。 transformのタグを理解できておらずでしたので、助かりました。＞ただし、これが効いても見た目に変化はないです。おっしゃる通りでした・・入れてみましたが変化なし・・・もう一度ディベロッパーツールで確認しましたが、やはりこの二つを無効にするとボタンが固定されます。。。かつほかに制御していそうなタグを見つけられず・・・なぜだ・・・情報が不足しているかもしれませんが、＞別の部分で設定しているCSS というのは、他の-webkit-transform:が、ということでしょうか・・・固定ボタンを実装する際、PCでは固定されたのですが、SPではフッターの上に（固定されずに）表示されてしまいます。。。ボタン実装に使用したHTML、CSSは下記のサイトのコピペです。 https://rilaks.jp/blog/cro/floating-banner/#%E3%83%95%E3%83%AD%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%90%E3%83%8A%E3%83%BC%E3%82%92HTML%E3%81%A8CSS%E3%81%A0%E3%81%91%E3%81%A7%E4%BD%9C%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3