スタイル属性によって上書きされたCSSを、優先させる方法について

こんばんは。お忙しいところ恐縮です。
今日一日、調べ、困り果ててしまいました。
何かヒントを頂けましたら、幸いです。

前提・実現したいこと

こちらの図のように、

要素を左からスライドインしながら、最後にはこの配置にしたいです。、
scrollrevealという、ライブラリを
CDNにて読み込みました。

スマホのレスポンシブデザインの際、
JS側のスタイル属性によって、自分が書いたCSSが上書きされてしまっています。
これは、!importantを使わずに、CSSで上書きをするには、どうしたらよいか、質問させて頂きました。

・タグのスタイル属性が、1.0.0.0で、1000点であり、最強だということは知りました。

該当のソースコード

HTML
1     <div class="mainbox">
2                    <div class="box1 animation4">
3                        <dl class="aftersupport-contents-2">
4                            <dt class="term">件名</dt>
5                            <dd class="description">内容</dd>
6                        </dl>
7                    </div>
8
9                    <div class="box2 animation4">
10                        <dl class="aftersupport-contents-2">
11                                <dt class="term">件名</dt>
12                                <dd class="description">内容</dd>
13                        </dl>
14                    </div>
15
16                    <div class="box3 animation4" id="box">
17                        <dl class="aftersupport-contents-2">
18                            <dt class="term">件名</dt>
19                            <dd class="description">内容</dd>
20                        </dl>
21                    </div>
22            </div>

CSS
1.mainbox .box3 {
2  position: absolute;
3  top: 35%;
4  right: 50%;
5  -webkit-transform: translateX(50%);
6          transform: translateX(50%);
7  margin-top: 100px;
8}
9
10@media (max-width: 667px) {
11  .mainbox .box3 {
12    position: static;
13    margin-top: 0px;
14    -webkit-transform: translateX(0%);←これが消されている
15            transform: translateX(0%);
16  }
17}

JS
1  ScrollReveal().reveal('.animation4', { 
2    duration: 2000, 
3    origin: 'left', 
4    distance: '100px',
5    viewFactor: 0.5,
6  });

試したこと

新しくdivクラスを作り、詳細度を上げた⇒効かず
element.styleに対して、translateX(0%)をかいてみた⇒効かず

CSS
1.mainbox .box3 .element.style{
2translateX(50%);
3}

idを十個書いてみた⇒0.10.0.0にしかならず、どの道タグのスタイル属性には勝てない
そもそもtransform: translateX(50%)を消して、marginで中央にしてはどうか⇒

CSS
1        top: 50%;
2        left: 0%;
3        margin: auto;

⇒効かず

CSSのlinkを、scrollrevealより下に持ってくる⇒効かず

translateX(50%)がどうしても鬼門で、万策尽きてしまいました。
JSをいじる、importを使う、以外に何か調べられてない方法があるのでしょうか…？
何かヒントを頂けましたら、幸いです。宜しくお願いいたします。

hatena19

2021/01/24 10:47

現状のJSコードも質問に追記してもらえますか。

nomura02

2021/01/24 11:02

追記させて頂きました。大変、失礼いたしました。

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

回答2件

ベストアンサー

scrollrevealライブラリはインラインスタイルに transform を設定することで移動させているので、
元のCSSでは transform で位置決めしないようにするのが筋でしょう。

とりあえず、スマホの方でPC用の transform を上書きする必要がないように、pc用のスタイルも @media を付けておけばどうでしょうか。

css
1@media (min-width: 668px) {
2  .mainbox .box3 {
3    position: absolute;
4    top: 35%;
5    right: 50%;
6    -webkit-transform: translateX(50%);
7    transform: translateX(50%);
8    margin-top: 100px;
9  }
10}
11
12@media (max-width: 667px) {
13  .mainbox .box3 {
14    position: static;
15    margin: 0;
16  }
17}

そもそも、PC版のCSSも absolute や transform で位置決めするというのは、レスポンシブ対応させるのにいろいろ複雑になるので、避けるべきでしょう。
質問の画像のようなレイアウトなら、FlexBoxで可能ですので、それでするのが吉だと思います。

FlexBoxで画像のレイアウトにするサンプルコードを提示しておきますので、参考にしてください。

css
1.mainbox {
2  display: flex;
3  justify-content: center;
4  flex-wrap: wrap;
5  gap: 20px;
6}
7.mainbox > div {
8  width: 40%;
9  height: 80vh;
10  background-color: aqua; 
11}
12@media (max-width: 667px) {
13  .mainbox > div {
14    display: block;
15    width: 90%;
16  }
17}

投稿2021/01/24 11:14

総合スコア34075

2021/01/24 12:21

flex-wrap: wrap…！！！！！！！！！！そうかflex-wrapだったんですね…(号泣) flex-wrapか…勉強した最初の頃から知ってるプロパティなのに… 勉強になりすぎて泣きそうです… すごい、これなら、コードも少なくてすみます！非常に、参考になりました！！そしてgap便利ですね…初めて使いました。よく理解出来ました！これで出来ました！！本当にありがとうございます！！助かりました！！！

nomura02

2021/01/24 12:26

また、スマホの方でPC用の transform を上書きする必要がないように、pc用のスタイルも @media を付ける、min-width:668pxの考え方も、非常に参考になりました。この方法は、理屈はよくわかり、別のところで使えそうです。